<template>
  <div class="chat-main" >


      <div class="sidebar-box" v-if="sidebarNewState"
           :style="{borderColor:switchSocketState?'#e5e5e5':'#5d5d67'}"
           @click="sidebarHide">
        <el-tooltip class="item" effect="dark"  content="显示侧边栏" placement="right">
          <svg stroke="currentColor" :color="switchSocketState?'#000':'#fff'" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
        </el-tooltip>
      </div>


      <div class="chat-main-left" :style="{width:sidebarState?'0':'18%'}">
          <div class="chat-main-left-top">


<!--              <div v-if="!aiDrawState" class="new-chat" @click="newChat(currentGroupCode(),1)">-->
<!--                &nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <span style="font-size: 17px;">+</span>-->
<!--                新建会话-->
<!--              </div>-->


            <div class="chat-top-main" v-if="!aiDrawState">
              <div class="chat-top-main-left" @click="newChat(currentGroupCode(),1)">
                &nbsp;&nbsp;&nbsp;
                <span style="font-size: 19px;">+</span>
                &nbsp;&nbsp;新建会话
              </div>
              <el-tooltip class="item" effect="dark"  content="隐藏侧边栏" placement="right">
                <div class="chat-top-main-right" @click="sidebarShow">
                  <svg stroke="currentColor" color="#fff" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
                </div>
              </el-tooltip>

            </div>

              <div v-if="aiDrawState" v-for="(item,index) in aiServerData" @click="clickServer(item)" class="new-chat">
                <div class="new-chat-body">
                  <div class="new-chat-body-left" v-html="item.serverIcon">
                  </div>
                  <div class="new-chat-body-right" v-if="item.serverType===0">
                    {{'('+item.serverCount+')'}}
                    {{item.serverName}}
                  </div>
                  <div class="new-chat-body-right" v-if="item.serverType===1">
                    (1)
                    {{item.serverName}}
                  </div>

                  <el-tooltip v-if="item.serverType===3" class="item"  effect="light" placement="right">
                    <div slot="content"  class="my-tooltip-content">
                      <div class="my-tooltip-content-item" v-on:click="deleteAiServer(item.sid,index)">
                        <svg t="1685347136702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" fill="#2c2c2c" p-id="2420"></path></svg>
                        删除服务器
                      </div>
                    </div>
                    <div class="new-chat-body-right">
                      {{'('+item.serverCount+')'}}
                      {{item.serverName}}
                    </div>
                  </el-tooltip>


                </div>
              </div>

              <span v-if="!sidebarState">
                <div class="chatting" id="chatting" v-if="!aiDrawState">
                  <div v-for="(item,index) in chattingList" id="chatting-panl">

                        <div class="chatting-item-date" v-if="item.date">
                          {{ item.date }}
                        </div>

                       <div class="chatting-item" @click="messageClick(item)">
                        <div class="chatting-item-left">
                          <svg stroke="currentColor" fill="none" stroke-width="2" color="#DCDFE6" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                        </div>

                        <el-popover
                            v-if="item.requestRecordVoList[0].systemName != null"
                            placement="right"
                            title="角色"
                            width="150"
                            trigger="hover"
                            :content="item.requestRecordVoList[0].systemName">
                            <div slot="reference" class="chatting-item-mid">
                            <span v-if="item.requestRecordVoList[
                                item.requestRecordVoList.length === 0?0:item.requestRecordVoList.length -1
                            ].requestContent !==''">{{item.requestRecordVoList[
                                item.requestRecordVoList.length === 0?0:item.requestRecordVoList.length -1
                                ].requestContent}}
                            </span>
                              <span v-else>新建会话</span>
                            </div>
                        </el-popover>

                        <div slot="reference" v-else class="chatting-item-mid">
                            <span v-if="item.requestRecordVoList[
                                item.requestRecordVoList.length === 0?0:item.requestRecordVoList.length -1
                            ].requestContent !==''">{{item.requestRecordVoList[
                                item.requestRecordVoList.length === 0?0:item.requestRecordVoList.length -1
                                ].requestContent}}
                            </span>
                              <span v-else>新建会话</span>
                            </div>

                        <div class="chatting-item-right-2 copy-link" title="分享对话" @click.stop="share(item)">
                          <svg t="1688456507566" style="width: 18px;height: 18px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="200" height="200"><path d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z" fill="#DCDFE6" p-id="2522"></path></svg>
                        </div>
                        <div class="chatting-item-right" title="删除对话" @click.stop="deleteGroup(item)">
                          <svg t="1679920173165" style="width: 20px;height: 20px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2817" width="200" height="200"><path d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z" fill="#DCDFE6" p-id="2818"></path><path d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z" fill="#DCDFE6" p-id="2819"></path></svg>
                        </div>
                      </div>
                  </div>
                </div>
              </span>

            <transition name="el-fade-in-linear">
              <div class="chatting-bottom-panl" v-if="bottomShowPanl"
              :style="{height:chattingList.length >= 5?(aiDrawState?'255px':'300px'):'255px',bottom:chattingList.length >= 5?(aiDrawState?'-9%':'-12%'):'-9%'}"
              >

                <div class="chatting-bottom-panl-item" @click.stop="deleteAll" v-if="chattingList.length >= 5 && !aiDrawState">
                    <div class="chatting-bottom-body-left" style="line-height: 42px;">
                      <svg t="1679920173165" style="width: 20px;height: 20px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2817" width="200" height="200"><path d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z" fill="#DCDFE6" p-id="2818"></path><path d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z" fill="#DCDFE6" p-id="2819"></path></svg>
                    </div>
                    <div class="chatting-bottom-body-right">
                      清除所有聊天记录
                    </div>
                </div>

                <div class="chatting-bottom-panl-item" @click.stop="openTool">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <svg t="1687936784226" class="icon"  style="width: 20px;height: 20px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3523" width="200" height="200"><path d="M904 260H736v-56c0-30.9-25.1-56-56-56H344c-30.9 0-56 25.1-56 56v56H120c-30.9 0-56 25.1-56 56v504c0 30.9 25.1 56 56 56h784c30.9 0 56-25.1 56-56V316c0-30.9-25.1-56-56-56z m-560-56h336v56H344v-56z m560 616H120V596h308v28c0 30.9 25.1 56 56 56h56c30.9 0 56-25.1 56-56v-28h308v224zM484 624V512h56v112h-56z m112-84v-28c0-30.9-25.1-56-56-56h-56c-30.9 0-56 25.1-56 56v28H120V316h784v224H596z" p-id="3524" fill="#DCDFE6"></path></svg></div>

                  <div class="chatting-bottom-body-right">
                    工具箱
                  </div>
                </div>

                <div class="chatting-bottom-panl-item" @click.stop="help">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <svg stroke="currentColor" fill="none" stroke-width="2" color="#DCDFE6" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </div>
                  <div class="chatting-bottom-body-right">
                    帮助 & 咨询
                  </div>
                </div>

                <div class="chatting-bottom-panl-item" @click.stop="account">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <svg stroke="currentColor" fill="none" style="width: 18px;height: 18px;" color="#DCDFE6" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                  </div>
                  <div class="chatting-bottom-body-right">
                    我的账户
                  </div>
                </div>

                <div class="chatting-bottom-panl-item" @click.stop="settingsClick">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <svg stroke="currentColor" fill="none" stroke-width="2"  color="#DCDFE6" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
                  </div>
                  <div class="chatting-bottom-body-right">
                    设置
                  </div>
                </div>


                <div class="line-box"></div>

                <div class="chatting-bottom-panl-item" @click="logout">
                  <div class="chatting-bottom-body-left" style="line-height: 38px;">
                    <svg t="1679922605322" style="width: 15px;height: 15px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6959" width="200" height="200"><path d="M424.6 849.2h-217V178.5h217c23.7-0.7 42.7-20.1 42.7-44s-19-43.3-42.7-44H172.1c-28.9 0-52.5 23.6-52.5 52.5v741.7c0 28.9 23.6 52.5 52.5 52.5h252.5c23.7-0.7 42.7-20.1 42.7-44s-19-43.3-42.7-44z" p-id="6960" fill="#DCDFE6"></path><path d="M888.2 482.7l-164-164c-17.1-17.1-45.1-17.1-62.2 0s-17.1 45.1 0 62.2l85.7 85.7H432.9c-26 0-47.2 21.3-47.2 47.2 0 26 21.3 47.2 47.2 47.2h314.7l-85.7 85.7c-17.1 17.1-17.1 45.1 0 62.2s45.1 17.1 62.2 0l164-164c17.2-17.1 17.2-45.1 0.1-62.2z" p-id="6961" fill="#DCDFE6"></path></svg>
                  </div>
                  <div class="chatting-bottom-body-right">
                    退出登录
                  </div>
                </div>


              </div>
            </transition>


              <div class="chatting-bottom" v-if="!sidebarState">



<!--                <div class="chatting-bottom-body" @click="aiDrawButton">-->
<!--                  <div class="chatting-bottom-body-left" style="line-height: 42px;">-->
<!--                    <svg v-if="!aiDrawState" t="1682831511238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2297" width="1.7em" height="1.7em"><path d="M156.8 752.9c-18-59.8 47.7-89.5 38.6-170.7-8.1-71.5-60.4-80.5-63.4-141.5-4.7-96.1 121.8-171 136.7-179.8 85.6-50.8 226.6-81.1 299-17 53.8 47.6 23.6 106.3 82.5 151.1 63.7 48.4 127.1 1.1 180.5 46.7 58.7 50.3 41 158.3 35.4 192.9-17.8 108.7-95.7 245.8-194.3 253.6-75.3 6-91.9-69-194.6-71.8-78.2-2.1-94.3 40.6-170.8 31.8-55.1-6.3-132.4-38.1-149.6-95.3z" fill="#695ADA" p-id="2298"></path><path d="M168.6 729.3c-18-59.8 47.7-89.5 38.6-170.7-8.1-71.5-60.4-80.5-63.4-141.5-4.7-96.1 121.8-171 136.7-179.8 85.6-50.8 226.6-81.1 299-17 53.8 47.6 23.6 106.3 82.5 151.1 63.7 48.4 127.1 1.1 180.5 46.7 58.7 50.3 41 158.3 35.4 192.9-17.8 108.7-95.7 245.8-194.3 253.6-75.3 6-91.9-69-194.6-71.8-78.2-2.1-94.3 40.6-170.8 31.8-55-6.4-132.4-38.2-149.6-95.3z" fill="#5F56DA" p-id="2299"></path><path d="M182.6 655.8c-2.9 5.5-5.6 11-8.1 16.4 2.7-5.3 5.5-10.7 8.1-16.4zM842.3 418c-53.3-45.7-116.8 1.7-180.5-46.7-58.8-44.8-28.7-103.5-82.5-151.1-72.4-64.1-213.4-33.8-299 17-12.2 7.2-99.4 59-127.8 130.4 35.5-59 105.2-100.3 116-106.7 85.6-50.8 226.6-81.1 299-17 53.8 47.6 23.6 106.3 82.5 151.1 63.7 48.4 127.1 1.1 180.5 46.7 58.7 50.2 41 158.3 35.4 192.9-5.5 33.7-16.8 70-32.7 104.4 22.1-41 37.7-86.6 44.5-128.1 5.7-34.6 23.3-142.7-35.4-192.9z" fill="#695ADA" p-id="2300"></path><path d="M587.5 301.6c5.7 6.5 5.1 16.4-1.4 22.2-6.5 5.7-16.4 5.1-22.2-1.4s-5.1-16.4 1.4-22.2a15.7 15.7 0 0 1 22.2 1.4z m-17.2 15.1c2.6 3 7.1 3.3 10.1 0.7 3-2.6 3.3-7.1 0.7-10.1-2.6-3-7.1-3.3-10.1-0.7-3 2.6-3.3 7.1-0.7 10.1zM675.5 846.6c5.7 6.5 5.1 16.4-1.4 22.2-6.5 5.7-16.4 5.1-22.2-1.4-5.7-6.5-5.1-16.4 1.4-22.2a15.7 15.7 0 0 1 22.2 1.4z m-17.2 15.1c2.6 3 7.1 3.3 10.1 0.7 3-2.6 3.3-7.1 0.7-10.1-2.6-3-7.1-3.3-10.1-0.7-3 2.6-3.3 7.1-0.7 10.1zM482.5 195.6c5.7 6.5 5.1 16.4-1.4 22.2-6.5 5.7-16.4 5.1-22.2-1.4-5.7-6.5-5.1-16.4 1.4-22.2a15.7 15.7 0 0 1 22.2 1.4z m-17.2 15.1c2.6 3 7.1 3.3 10.1 0.7 3-2.6 3.3-7.1 0.7-10.1s-7.1-3.3-10.1-0.7c-3 2.6-3.3 7.1-0.7 10.1zM308.9 275.7c0.9 1 0.8 2.5-0.2 3.3l-11.3 9.9c-1 0.9-2.5 0.8-3.3-0.2-0.9-1-0.8-2.5 0.2-3.3l11.3-9.9c1-0.9 2.5-0.8 3.3 0.2zM337.6 250.5c0.9 1 0.8 2.5-0.2 3.3l-11.3 9.9c-1 0.9-2.5 0.8-3.3-0.2-0.9-1-0.8-2.5 0.2-3.3l11.3-9.9c1-0.8 2.5-0.7 3.3 0.2zM300.1 248.1l9.9 11.3c0.9 1 0.8 2.5-0.2 3.3-1 0.9-2.5 0.8-3.3-0.2l-9.9-11.3c-0.9-1-0.8-2.5 0.2-3.3 0.9-0.9 2.4-0.8 3.3 0.2zM325.3 276.8l9.9 11.3c0.9 1 0.8 2.5-0.2 3.3-1 0.9-2.5 0.8-3.3-0.2l-9.9-11.3c-0.9-1-0.8-2.5 0.2-3.3 0.9-0.9 2.4-0.8 3.3 0.2z" fill="#FFFFFF" p-id="2301"></path><path d="M126.2 353H869v419.8H126.2z" fill="#313145" p-id="2302"></path><path d="M126.2 353H869v25.9H126.2z" fill="#F4F4F4" p-id="2303"></path><path d="M142.2 366.1m-4.9 0a4.9 4.9 0 1 0 9.8 0 4.9 4.9 0 1 0-9.8 0Z" fill="#F93E3E" p-id="2304"></path><path d="M158.3 366.1m-4.9 0a4.9 4.9 0 1 0 9.8 0 4.9 4.9 0 1 0-9.8 0Z" fill="#F4D225" p-id="2305"></path><path d="M173.7 365.6m-4.9 0a4.9 4.9 0 1 0 9.8 0 4.9 4.9 0 1 0-9.8 0Z" fill="#6BDDAC" p-id="2306"></path><path d="M130.9 417.9H192v346.7h-61.1z" fill="#34344C" p-id="2307"></path><path d="M203.1 417.9h534.5v346.7H203.1z" fill="#FFFFFF" p-id="2308"></path><path d="M130.9 382h610.9v30.1H130.9z m617 3.4h110.3v86.9H747.9z m0 93.4h110.3v285.8H747.9z" fill="#34344C" p-id="2309"></path><path d="M752.4 483.2h100v43.6h-100z" fill="#8557DA" p-id="2310"></path><path d="M752.4 532.3h100v43.6h-100z" fill="#4082FC" p-id="2311"></path><path d="M752.4 581.3h100v43.6h-100z" fill="#FCA360" p-id="2312"></path><path d="M156.2 444h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2V442c0.1 1.1-0.8 2-2 2z m247.6-52.4H140.2c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h263.6c1.5 0 2.6 1.2 2.6 2.6 0.1 1.4-1.1 2.6-2.6 2.6z m0 8H140.2c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h263.6c1.5 0 2.6 1.2 2.6 2.6 0.1 1.4-1.1 2.6-2.6 2.6z m0 8H140.2c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h263.6c1.5 0 2.6 1.2 2.6 2.6 0.1 1.4-1.1 2.6-2.6 2.6z m325.6-16H421.7c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h307.8c1.5 0 2.6 1.2 2.6 2.6 0 1.4-1.2 2.6-2.7 2.6z m0 8H421.7c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h307.8c1.5 0 2.6 1.2 2.6 2.6 0 1.4-1.2 2.6-2.7 2.6z m0 8H421.7c-1.5 0-2.6-1.2-2.6-2.6 0-1.5 1.2-2.6 2.6-2.6h307.8c1.5 0 2.6 1.2 2.6 2.6 0 1.4-1.2 2.6-2.7 2.6z m-566.2 15.5h21v21h-21z m-7 48h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9c0.1 1.1-0.8 2-2 2z m25.9 0h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9a2 2 0 0 1-2 2z m-25.9 27.2h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9c0.1 1.1-0.8 2-2 2z m25.9 0h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9a2 2 0 0 1-2 2z m-25.9 27.1h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9c0.1 1.1-0.8 2-2 2z m25.9 0h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9a2 2 0 0 1-2 2z m-25.9 27.1h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9c0.1 1.1-0.8 2-2 2z m25.9 0h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9a2 2 0 0 1-2 2z m-25.9 27.1h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9c0.1 1.1-0.8 2-2 2z m25.9 0h-16.9a2 2 0 0 1-2-2v-16.9c0-1.1 0.9-2 2-2h16.9a2 2 0 0 1 2 2v16.9a2 2 0 0 1-2 2z m0.3 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m0 15.2H139c-0.9 0-1.7-0.8-1.7-1.7v-3.6c0-0.9 0.8-1.7 1.7-1.7h43.4c0.9 0 1.7 0.8 1.7 1.7v3.6c0 0.9-0.7 1.7-1.7 1.7z m601.5-262.3h-34.3v-80.6c0-1.3 1.1-2.3 2.3-2.3h29.6c1.3 0 2.3 1.1 2.3 2.3v80.6z" fill="#2D2D42" p-id="2313"></path><path d="M749.6 395H855v74.3H749.6z" fill="#2D2D42" p-id="2314"></path><path d="M756.9 404h90.6v2.5h-90.6z m0 10.6h90.6v2.5h-90.6z m0 10.5h90.6v2.5h-90.6z m0 10.5h90.6v2.5h-90.6z m0 10.6h90.6v2.5h-90.6z m0 10.5h90.6v2.5h-90.6z" fill="#1C1C28" p-id="2315"></path><path d="M723.3 438.6l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.2l-63.1 0.2-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.2 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.1l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.2l-63.1 0.2-63.1 0.1-126.3 0.2-126.2-0.1-63.2-0.2-63.1-0.2 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.1l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.2l-63.1 0.2-63.1 0.2-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.1l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.2l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.1l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z m0 33.2l-63.1 0.3-63.1 0.1-126.3 0.2-126.2-0.2-63.2-0.1-63.1-0.3 63.1-0.3 63.2-0.1 126.2-0.2 126.3 0.2 63.1 0.1z" fill="#E6E6EF" p-id="2316"></path><path d="M532 753.1l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.1 41.3z m33 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.1 41.3z m33 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.2 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m32.9 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m33 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m33 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m-198.1 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m-33.1 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.1 41.3z m-33.2 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m-33.1 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.1 41.3z m-33.2 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m-33.1 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.1 41.3z m-33.2 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z m-33.1 0l-0.3-41.3-0.2-41.3-0.1-82.7 0.1-82.7 0.2-41.3 0.3-41.3 0.3 41.3 0.1 41.3 0.2 82.7-0.2 82.7-0.2 41.3z m-33.2 0l-0.3-41.3-0.1-41.3-0.2-82.7 0.2-82.7 0.1-41.3 0.3-41.3 0.3 41.3 0.2 41.3 0.1 82.7-0.1 82.7-0.2 41.3z" fill="#E6E6EF" p-id="2317"></path><path d="M416.3 475.5c25.4 0 55.2 37 89.3 111.1 20.4 44.4 30.5 75.5 30.5 93.4 0 12-4.6 17.9-13.9 17.9-22.9 0-37.7-7.4-44.3-22.1-6.6-14.8-27.2-22.1-61.8-22.1-34.6 0-55.4 7.4-62.4 22.1-6.9 14.8-21.4 22.1-43.4 22.1-8.7 0-13.1-5.8-13.1-17.4 0-17.7 10.2-48.9 30.5-93.9 33.7-74.1 63.1-111.1 88.6-111.1z m-16.8 97.9c-12 25.7-6.3 38.5 17 38.5s29.3-12.8 17.9-38.5c-11.3-25.6-23-25.6-34.9 0z m196.7 13.5c0-74.4 10.3-111.6 31-111.6h0.2c20.8 0.1 31.2 34.3 31.3 102.6v0.6c0 68-10.4 104.9-31.2 111-1.6 0.5-3.2 0.8-4.7 0.8-17.7 0-26.6-34.4-26.6-103.4z" fill="#FCA360" p-id="2318"></path><path d="M103.7 440.2c-12.9 7.4-17.9 19-18.8 33.5-2.4 38.4 8.1 74.3 21.5 109.5C125 632 149.3 677.7 184 717.3c2.5 2.9 5.4 5.4 5.7 5.8 24.6-11.7 47.8-22.7 72.8-34.6-6.2-48.1-24.7-95.8-50.1-140.6-13.9-24.5-29.9-48.4-48.3-69.8-12.9-15-31.3-25.4-47.3-37.9-3.8-2.6-10-1.4-13.1 0z" fill="#FD595E" p-id="2319"></path><path d="M547.3 579.4c-12.6-11.5-18-11-28.7 2.2-10.5 12.9-21.7 25.2-31.6 38.5-6.7 9-12.7 18.9-17.1 29.3-9.7 22.9-3.6 41.6 16.7 56 7.2 5.1 14.2 10.5 21.2 15.7-0.5 2.2-0.5 2.4-1 4.6-13.5 2.8-27.2 5.5-40.7 8.5-15.7 3.5-31.4 7.1-47 11.2-4.9 1.3-9.7 4.1-14 7-16.7 11.1-17 26 0.3 36 12 6.9 25.8 10.5 38.1 16.8 11.1 5.7 22.6 11.7 31.8 19.9 11.4 10.4 8.7 21.5-6.4 25.1-17.7 4.1-36.1 5.3-54.2 7.4-4.7 0.5-9.5 0.8-14.3 1-5.4 0.3-8.4 6.5-5.1 10.8 2.8 3.7 5.4 7.3 9.1 12 0 0 0 0.1 0.1 0.1 1.7 2.9 4.8 4.5 8.1 4.1 19.9-2.1 40-3.1 59.2-7.8 11.8-2.9 23.7-11.4 32.2-20.5 13.8-14.7 13.5-34.1-2.2-46.5-17.5-13.7-38.4-23.2-58-34.3-3.6-2-7.6-3.1-11.5-4.7l0.4-4c18-3.3 36-6.3 53.8-10.1 11.4-2.4 23.3-4.5 33.7-9.6 21.9-10.8 23.7-34.9 4.5-50-4.1-3.2-8.7-5.8-13.1-8.7-18.4-12.2-22.9-27.3-10.8-45.8 9.5-14.5 21.8-27.2 32.9-40.6 4.5-5.4 9.1-10.6 13.6-15.9 0.7-0.6 0.7-7.1 0-7.7z" fill="#313145" p-id="2320"></path><path d="M398.6 877.4c-4.5-3.1-8.9-6.5-13.6-9.3-10.5-6.2-21.4-11.8-31.7-18.3-8.6-5.4-15.8-10.2-9-23.7 7.3-14.4-0.6-34.1-13.7-44.4-14.8-11.6-37.7-14.3-51.3-3.9-10.9 8.4-21.2 18.3-29.3 29.4-11.9 16.5-8 32.2 9 43.7 5.7 3.8 12 7.8 18.6 9.2 36.6 7.5 73.3 14.3 109.9 21.1 2.3 0.4 7.5 1 10 0.7 0.2 0 0.3-0.1 0.4-0.1 2.1-0.3 2.6-3.2 0.7-4.4z" fill="#FD595E" p-id="2321"></path><path d="M341.9 837c-0.9-0.6-1.9-1.1-2.8-1.6-8.6-5.4-15.8-10.2-9-23.7 5-9.9 2.9-22.3-3.2-32.4 1.3 0.8 2.6 1.6 3.8 2.5 13.1 10.3 21 29.9 13.7 44.4-2.3 4.5-2.9 7.9-2.5 10.8z m-78.5 8.7c36.6 7.5 73.3 14.3 109.9 21.1 2.3 0.4 7.5 1 10 0.7 0.2 0 0.3-0.1 0.4-0.1 0 0 0.1 0 0.1-0.1 0.4 0.3 0.9 0.5 1.3 0.8 4.7 2.8 9.1 6.2 13.6 9.3 1.8 1.2 1.4 4-0.7 4.5-0.2 0-0.3 0.1-0.4 0.1-2.4 0.4-7.7-0.3-10-0.7-36.6-6.8-73.3-13.6-109.9-21.1-6.5-1.3-12.9-5.3-18.6-9.2-6-4.1-10.4-8.7-13-13.7 5.3 3.7 11.2 7.2 17.3 8.4z m-51.5-68.3c26.3-12.9 51.5-25.3 78.2-38.4 3.9 15.8-0.2 24.5-10.6 29.8-12.3 6.3-25.1 11.9-37.6 18-11 5.2-20 2.5-30-9.4z m-10.8-23.6c26.6-12.7 51.7-24.8 77.8-37.4 3.1 7.3 5.1 11.8 6.4 14.9a48804 48804 0 0 1-76.8 37.9c-1.8-3.7-3.8-8-7.4-15.4z m73.1-44.8c-25.9 12.5-50.7 24.4-76 36.6-3-12 1.1-20.2 11.4-25.3 12.5-6.2 25.1-12.1 37.8-17.9 10.3-4.8 19.4-2.9 26.8 6.6z" fill="#FD595E" p-id="2322"></path></svg>-->
<!--                    <svg v-else t="1682832512047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2790" width="1em" height="1em"><path d="M431.207059 2.199998C335.414129 13.19899 257.420186 72.593947 219.024215 163.78688l-6.199996 14.797989-19.997985 5.799996C104.233299 210.582846 38.840347 279.776795 15.041364 372.369727c-6.999995 27.39698-8.999993 71.393948-4.199997 99.990927 7.399995 44.996967 26.597981 88.592935 53.795961 121.989911l9.198993 11.399991-5.199996 19.597986c-6.799995 26.597981-8.598994 74.593945-3.799997 103.190924 14.799989 87.392936 75.193945 163.58688 155.587886 196.383857 46.395966 18.998986 95.99193 24.797982 142.187895 16.798987l11.599992-1.999998 18.597986 17.598987c30.396978 28.596979 66.593951 48.395965 108.789921 59.994956 25.998981 6.999995 83.193939 8.999993 111.391918 3.599997 53.194961-9.799993 98.391928-33.797975 137.1889-72.794946 27.996979-28.196979 51.194963-64.393953 59.794956-93.591932 2.199998-6.999995 3.599997-8.599994 8.798993-9.799993 12.798991-2.598998 42.595969-13.39799 56.194959-20.196985 35.996974-17.998987 72.793947-49.195964 94.792931-80.593941 19.797985-28.197979 36.196973-65.993952 44.395967-102.990924 1.799999-7.799994 2.799998-24.997982 2.799998-48.995965 0-33.997975-0.6-38.796972-5.799996-58.995956-9.998993-38.795972-25.997981-71.993947-48.395964-100.190927l-10.198993-12.799991 4.399997-17.597987c26.79698-102.790925-16.798988-217.181841-105.391923-276.576797-30.996977-20.598985-58.194957-31.997977-95.59193-40.196971-22.397984-4.999996-70.993948-5.799996-91.991932-1.799998-12.399991 2.399998-12.99999 2.399998-15.799989-1.599999-4.598997-7.199995-34.795975-31.596977-52.794961-42.995969C548.196973 9.598993 486.603019-4.199997 431.207059 2.199998z m45.395967 67.793951c25.197982 2.399998 40.39697 6.399995 61.394955 16.198988 16.797988 7.799994 41.995969 23.397983 41.995969 25.997981 0 0.799999-45.595967 27.79798-101.390926 59.794956-55.995959 32.196976-104.591923 60.794955-108.19092 63.394954-14.799989 10.998992-14.399989 8.399994-14.59999 97.591928-0.2 43.995968-0.999999 110.389919-1.599998 147.387892l-1.199 67.393951-42.596968-24.397982-42.595969-24.397982 0.599999-134.988902c0.799999-154.386887 0.2-147.987892 19.597986-187.383862 29.797978-60.395956 86.792936-100.191927 151.987889-106.591922 8.199994-0.799999 15.398989-1.599999 15.998988-1.599999 0.6-0.2 9.798993 0.6 20.597985 1.599999z m268.977803 82.992939c73.393946 15.399989 132.189903 74.193946 147.387892 147.987892 3.599997 16.998988 4.599997 62.394954 1.599999 67.79495-1.199999 2.399998-22.797983-9.399993-108.590921-59.394957-105.391923-61.394955-107.191921-62.394954-117.989913-62.394954-10.799992 0-13.19999 1.399999-137.989899 73.593946l-126.989907 73.393946-0.599-49.395963c-0.2-27.19798 0.2-49.995963 1-50.795963 3.799997-3.599997 209.182847-121.189911 223.581836-127.989906 35.796974-16.797988 77.992943-21.397984 118.589913-12.798991z m-537.955606 362.369735c3.199998 4.599997 37.596972 25.398981 130.389904 78.993942 69.393949 39.796971 125.988908 72.993947 125.988908 73.593946 0 0.6-5.599996 4.199997-12.598991 8.199994-6.799995 3.799997-25.997981 14.797989-42.596968 24.397982l-30.196978 17.597987-107.790921-62.194954c-59.194957-34.196975-114.589916-67.393951-122.78991-73.793946-29.397978-22.597983-56.395959-63.793953-66.194952-101.190926-6.199995-24.197982-7.199995-60.794955-2.199998-84.992938 7.599994-36.996973 23.397983-66.994951 49.195964-93.792931 17.398987-17.997987 33.197976-29.396978 55.195959-40.195971l16.997988-8.199994 0.999999 127.589907 0.999999 127.589906 4.599997 6.398996zM750.379825 367.169731c56.394959 32.596976 108.389921 62.994954 115.589916 67.593951 43.396968 28.597979 73.593946 75.793944 81.99294 127.989906 3.599997 21.597984 1.599999 61.994955-3.999997 80.992941-8.998993 31.397977-24.996982 58.995957-47.594966 82.593939-17.598987 18.397987-48.195965 38.995971-65.794951 44.395967l-4.599997 1.399999v-124.189909c0-138.188899 0.4-133.389902-13.59899-143.387895-4.399997-2.999998-62.393954-37.196973-128.988906-75.593944-66.594951-38.596972-121.189911-70.393948-121.189911-70.993948-0.2-0.799999 83.592939-49.795964 85.192938-49.995964 0.4 0 46.595966 26.597981 102.991924 59.194957z m-181.385867 50.195963l54.99596 31.596977v127.989906l-55.19596 31.596977-55.194959 31.797977-39.196971-22.598983c-21.797984-12.398991-46.795966-26.99698-55.994959-32.196977l-16.398988-9.799993 0.399999-63.393953 0.6-63.394954 53.99496-31.396977c29.797978-17.198987 54.79596-31.397977 55.59596-31.397977 0.799999-0.2 26.197981 13.99999 56.394958 31.197977z m147.587892 85.592938l41.39697 23.797982v127.389907c0 139.787898-0.4 146.187893-11.999991 178.384869-11.597992 31.796977-36.595973 65.394952-64.593953 86.592937-6.799995 5.199996-21.397984 13.79899-32.396976 18.997986-51.995962 24.997982-109.59092 25.597981-162.586881 1.799999-12.598991-5.799996-40.39697-23.397983-40.396971-25.797982 0-0.6 46.996966-28.196979 104.191924-61.194955 57.394958-32.996976 107.190921-62.794954 110.789919-66.193951 3.799997-3.799997 7.399995-9.999993 8.799993-15.399989 1.599999-6.398995 2.199998-50.994963 2.199999-151.386889 0-78.392943 0.799999-141.987896 1.599999-141.587896 0.799999 0.2 20.197985 11.398992 42.995968 24.597982zM622.590919 732.139464c-3.799997 3.599997-205.38285 119.189913-221.781838 126.989907-26.597981 12.798991-47.995965 17.397987-79.792941 17.397987-19.798985 0-30.197978-0.999999-43.596968-4.199997-68.59395-16.997988-120.589912-66.193952-140.587897-133.787902-5.599996-18.798986-8.599994-57.395958-5.999996-75.193945l1.399999-9.199993 50.395963 29.197979c174.185872 100.391926 165.185879 95.59193 176.185871 95.591929 9.598993-0.2 16.597988-3.799997 137.1879-73.393946l126.989907-73.393946 0.599999 49.395964c0.2 26.99798-0.2 49.795964-0.999999 50.595963z" p-id="2791" fill="#ffffff"></path></svg>-->
<!--                  </div>-->
<!--                  <div class="chatting-bottom-body-right">-->
<!--                    {{!aiDrawState?'切换绘画':'切换聊天'}}-->
<!--                  </div>-->
<!--                </div>-->




                <div v-if="aiDrawState" class="chatting-bottom-body" @click="createImgServer">
                  <div class="chatting-bottom-body-left" style="line-height: 38px;">
                    <svg t="1685105327216" class="icon" style="width: 17px;height: 17px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4457" width="200" height="200"><path d="M572.2 530c-114.3 0-207.3-93-207.3-207.3s93-207.3 207.3-207.3c114.3 0 207.3 93 207.3 207.3S686.5 530 572.2 530z m0-364.7c-86.8 0-157.3 70.6-157.3 157.3S485.4 480 572.2 480s157.3-70.6 157.3-157.3S659 165.3 572.2 165.3zM279.1 515.8c-3 0-6-0.5-9-1.7-35.4-13.7-65.7-37.5-87.5-68.7-22.4-32-34.2-69.7-34.2-108.8 0-104.9 85.4-190.3 190.3-190.3 13.8 0 25 11.2 25 25s-11.2 25-25 25c-77.4 0-140.3 62.9-140.3 140.3 0 57.6 36.1 110.2 89.7 130.9 12.9 5 19.3 19.5 14.3 32.3-3.8 9.9-13.3 16-23.3 16zM932 888.6c-13.8 0-25-11.2-25-25 0-106.8-49.2-204.8-135-268.7-11.1-8.2-13.4-23.9-5.1-35 8.2-11.1 23.9-13.4 35-5.1C849 589.9 888 636 914.7 688.1c28.1 54.6 42.3 113.7 42.3 175.5 0 13.8-11.2 25-25 25z" p-id="4458" fill="#ffffff"></path><path d="M92 784.5c-1 0-2.1-0.1-3.1-0.2-13.7-1.7-23.4-14.2-21.7-27.9 7.6-61.4 29-118.2 63.5-169 33-48.4 77.3-89.3 128.4-118.4 12-6.8 27.3-2.6 34.1 9.4 6.8 12 2.6 27.3-9.4 34.1-93 52.9-153.9 144-167 250-1.6 12.7-12.3 22-24.8 22zM212.4 889.8c-13.8 0-25-11.2-25-25 0-51.9 10.2-102.3 30.3-149.8 19.4-45.8 47.1-87 82.5-122.3 35.3-35.3 76.5-63.1 122.3-82.5 47.5-20.1 97.9-30.3 149.8-30.3 13.8 0 25 11.2 25 25s-11.2 25-25 25c-184.6 0-334.8 150.2-334.8 334.8-0.1 13.9-11.3 25.1-25.1 25.1z" p-id="4459" fill="#ffffff"></path></svg>
                  </div>
                  <div class="chatting-bottom-body-right">
                    搭建和朋友的绘画室
                  </div>
                </div>

                <div class="chatting-bottom-body" @click="toOpenCode">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <img src="~@/assets/gitee.png" style="width: 20px;height: 20px;">
                  </div>
                  <div class="chatting-bottom-body-right">
                    项目已开源
                  </div>
                </div>

                <div class="chatting-bottom-body" @click="payKeepState = true">
                  <div class="chatting-bottom-body-left" style="line-height: 42px;">
                    <svg stroke="currentColor" fill="none" style="width: 18px;height: 18px;" color="#DCDFE6" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                  </div>
                  <div class="chatting-bottom-body-right">
                    升级PLUS
                    <div class="new-tips">NEW</div>
                  </div>
                </div>

                <div class="chatting-bottom-body" @click.stop="bottomShowPanl = !bottomShowPanl">
                  <div class="chatting-bottom-body-left" style="line-height: 38px;">
                    <div class="tips-username" v-if="headImg === '-1'">{{nikeName}}</div>
                    <img class="tips-img" v-else :src="headImg"  alt=""/>
                  </div>
                  <div class="chatting-bottom-body-right">
                    <div class="chatting-bottom-body-right-left">{{currentUsername}}</div>
                    <div class="chatting-bottom-body-right-right">...</div>
                  </div>
                </div>


              </div>

          </div>
      </div>

      <div class="chat-main-right" v-if="!aiDrawState" @click="bottomShowPanl = false"
           @scroll="handleScroll"
           :style="{background:switchSocketState?'#fff':'#343541',width:sidebarState?'100%':'82%'}" id="chatting-content-right">


        <!--初始化模板 非plus-->
        <transition name="el-fade-in-linear">
          <div class="init-temp" v-if="initChatState === 0 && (isPlusType === 0 || isPlusType === 1)">
            <div class="init-temp-title" :style="{color:switchSocketState?'#343541':'#ececf1'}">PlumGPT</div>
            <div class="init-temp-icon">
              <div class="init-temp-icon-left">
                <svg :color="switchSocketState?'#343541':'#ececf1'" t="1679832236269" style="width: 30px;height: 30px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2971" width="200" height="200">
                  <path d="M752.41931153 240.7063601c8.36993432 0 15.62255883 3.08990502 21.72821045 9.16589356 6.1353147 6.08093262 9.18566918 13.3928833 9.18566918 21.73315382 0 8.55285621-3.05035376 15.85986352-9.18566918 21.94079614l-43.67394996 43.66900658c-5.93261719 5.97216773-13.17041016 8.95825195-21.72326709 8.95825195-8.87420678 0-16.20098901-2.98608422-22.08911085-8.75061035-5.88317847-5.87329102-8.80004906-13.2890625-8.80004906-22.14843774 0-8.54791283 2.95642114-15.75604272 8.91375732-21.72821044l43.66900659-43.67394996c6.14025879-6.07598853 13.44726539-9.16589356 21.98034668-9.16589356z m37.66223167 240.39459181h61.79809547c8.52813721 0 15.82031227 2.98608422 21.83697534 9.06207276C879.78271508 496.24395728 882.78857422 503.45208717 882.78857422 512c0 8.55285621-3.00585914 15.85986352-9.07196021 21.83697533-6.01666236 6.07598853-13.30883813 9.06207276-21.83697534 9.06207276h-61.79809547c-8.52813721 0-15.80053734-2.98608422-21.86663841-9.06207276-6.01666236-5.97711182-9.05712867-13.2890625-9.05712867-21.83697533 0-8.55285621 3.04046631-15.76098609 9.05712867-21.83697533 6.06610107-6.07598853 13.33850122-9.06207276 21.86663841-9.06207276zM512 141.21142578c8.52813721 0 15.79064917 3.08990502 21.85180688 9.06207276 6.02160645 6.08093262 9.05712867 13.3928833 9.05712867 21.83697533v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697534-6.06610107 6.07598853-13.32861305 9.16589356-21.85675025 9.16589355-8.53802467 0-15.80053734-3.08990502-21.86663842-9.16589355-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697534V172.11047387c0-8.44409203 3.03552222-15.76098609 9.05218458-21.83697533C496.20440674 144.3013308 503.46691871 141.21142578 512.00494408 141.21142578zM271.81304907 240.7063601c8.36499023 0 15.61267066 3.08990502 21.743042 9.16589356l43.66900659 43.67394996c6.14025879 6.07598853 9.17083764 13.38793922 9.17083764 21.72821044 0 8.55285621-3.01080323 15.86480689-9.05712938 21.83697534-6.03149391 6.08093262-13.30389404 9.06207276-21.85180617 9.06207275-8.69622827 0-16.02795386-2.98608422-21.95068359-8.85443115l-43.68383814-43.67395068c-5.97216773-5.97216773-8.92858886-13.28411842-8.92858886-22.03967284 0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697462 6.01666236-5.97216773 13.30883813-9.06207276 21.85675096-9.06207276h-0.03955126z m436.93725586 436.91253615c8.36499023 0 15.60772729 2.98608422 21.72326709 9.16589355l43.67394995 43.67395067c6.1353147 6.17980933 9.18566918 13.38793922 9.18566919 21.93585205 0 8.34521461-3.05035376 15.65716529-9.18566919 21.73315382-6.1105957 6.17980933-13.35827613 9.16589356-21.72326636 9.16589356-8.52813721 0-15.84008789-2.98608422-21.98034668-9.16589356l-43.66900659-43.66900587c-5.95733618-5.87329102-8.91375732-13.1852417-8.91375732-21.73315453 0-8.55285621 3.01080323-15.86480689 9.05712866-21.94079614 6.03149391-6.07598853 13.32861305-9.16589356 21.85180689-9.16589355h-0.01977564zM512.00494408 388.40380836c-34.12243628 0-63.22192359 12.05310035-87.39239525 36.2532351-24.1358645 24.10125732-36.21368384 53.25018335-36.21368384 87.34295654 0 34.0927732 12.07782007 63.24169922 36.21368384 87.44677734C448.78796387 623.53814721 477.88250709 635.59619164 512 635.59619164c34.12243628 0 63.23181176-12.05310035 87.4072268-36.15435838C623.51837158 575.2466433 635.59619164 546.09771729 635.59619164 512c0-34.0927732-12.07782007-63.24169922-36.18896484-87.34295654C575.23181176 400.45690942 546.12243628 388.40380836 512 388.40380836zM172.12036133 481.10095191h61.79809547c8.53802467 0 15.80053734 2.98608422 21.86663841 9.06207276 6.01666236 6.08093262 9.05712867 13.2890625 9.05712867 21.83697533 0 8.55285621-3.04046631 15.85986352-9.05712867 21.83697533-6.06610107 6.07598853-13.32861305 9.06207276-21.86663841 9.06207276h-61.79809547c-8.52813721 0-15.81042481-2.98608422-21.83697534-9.06207276C144.21728492 527.85986352 141.21142578 520.54791283 141.21142578 512c0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697533 6.03149391-6.07598853 13.30883813-9.06207276 21.83697534-9.06207276zM512.00494408 759.19238258c8.52813721 0 15.79064917 2.98608422 21.85180617 9.06207274 6.02160645 6.08093262 9.05712867 13.2890625 9.05712938 21.83697535v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697533C527.79559326 879.80249 520.53308129 882.78857422 512 882.78857422c-8.53802467 0-15.80053734-2.98608422-21.86663842-9.06207276-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697533v-61.79809546c0-8.55285621 3.03552222-15.76098609 9.05218458-21.83697534 6.06610107-6.07598853 13.32861305-9.06207276 21.86663842-9.06207275z m-196.47839379-81.57348633c8.5034182 0 15.80053734 2.98608422 21.84686279 9.16589355 6.03149391 6.08093262 9.07196021 13.3928833 9.07196021 21.94079614 0 8.44409203-3.08001685 15.65222192-9.19555664 21.72821044l-43.67394995 43.67394996c-6.10565162 6.17980933-13.34838867 9.16589356-21.72326637 9.16589356-8.54791283 0-15.84008789-2.98608422-21.85180687-8.96319533-6.07104516-6.07598853-9.0769043-13.38793922-9.0769043-21.93585205 0-8.65173364 2.95642114-15.96862769 8.92858887-21.94079614l43.68383813-43.66900658c6.10565162-6.17980933 13.44232202-9.16589356 21.95068359-9.16589355h0.03955054zM512 326.60571289c33.628052 0 64.6506958 8.34521461 93.0481565 24.81811547 28.42712378 16.69042992 50.92163109 39.1404419 67.4637456 67.56756568 16.57177758 28.32824708 24.86755347 59.32617188 24.86755347 93.00860596 0 33.68243408-8.27600098 64.68035888-24.86755347 93.10748267-16.58166504 28.32824708-39.08605981 50.77825904-67.4637456 67.4637456-28.36285424 16.58166504-59.37561059 24.82305884-93.0481565 24.82305884-33.66760254 0-64.67047143-8.24139381-93.05804468-24.81811547-28.37768578-16.69042992-50.86230492-39.14538598-67.46374487-67.46868897-16.58166504-28.42712378-24.86755347-59.42504859-24.86755348-93.10748267 0-33.68243408 8.31555152-64.68035888 24.86755348-93.00860596 16.55200195-28.42712378 39.03662109-50.87713647 67.46374487-67.56262231C447.35424828 334.94598413 478.371948 326.60571289 512 326.60571289z" p-id="2972" :fill="switchSocketState?'#343541':'#ececf1'"></path></svg>
                <br/>
                <span :style="{color:switchSocketState?'#343541':'#ececf1'}">示例</span>
              </div>
              <div class="init-temp-icon-mid">
                <svg :color="switchSocketState?'#343541':'#ececf1'" t="1679832456557" style="width: 30px;height: 30px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6032" width="200" height="200">
                  <path d="M677.1 73a3.6 3.6 0 0 0-2.7 1.1L197.1 535.3a4 4 0 0 0 1.8 6.7l238.5 61.9-94.3 342a4 4 0 0 0 3.9 5.1 3.9 3.9 0 0 0 2.7-1.2l477.2-461.2a4 4 0 0 0-1.8-6.7l-237.3-63L681 78.1a4 4 0 0 0-3.9-5.1z m13.1 447.6L478.7 725.1 506.8 623l19.5-70.5-70.8-18.3-121.1-31.4 211.8-204.7-27.9 101.8-19.1 70 70.1 18.6z" p-id="6033" :fill="switchSocketState?'#343541':'#ececf1'"></path></svg>
                <br/>
                <span :style="{color:switchSocketState?'#343541':'#ececf1'}">能力</span>
              </div>
              <div class="init-temp-icon-right">
                <svg :color="switchSocketState?'#343541':'#ececf1'" t="1679832514356" class="icon" style="width: 30px;height: 30px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7139" width="200" height="200">
                  <path d="M512 179.2l390.4 627.2H128l384-627.2m0-64c-19.2 0-44.8 12.8-51.2 32l-390.4 627.2c-25.6 44.8 6.4 96 51.2 96H896c51.2 0 83.2-57.6 51.2-96l-384-627.2c-6.4-19.2-32-32-51.2-32z" :fill="switchSocketState?'#343541':'#ececf1'" p-id="7140">
                </path><path d="M512 640c-19.2 0-32-12.8-32-32v-192c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 19.2-12.8 32-32 32z" :fill="switchSocketState?'#343541':'#ececf1'" p-id="7141"></path>
                  <path d="M512 723.2m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" :fill="switchSocketState?'#343541':'#ececf1'" p-id="7142"></path></svg>
                <br/>
                <span :style="{color:switchSocketState?'#343541':'#ececf1'}">局限性</span>
              </div>
            </div>
            <div class="init-temp-item">
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}" @click="clickItem('请帮我写一个Java冒泡排序的案例')">"请帮我写一个Java冒泡排序的案例"→</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}">Ctrl + 上箭头可回显上次提问内容</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}">可能偶尔生成不正确的信息，可以跟换描述继续提问</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}" @click="clickItem('推荐中国10个比较好玩的旅游景点')">"推荐中国10个比较好玩的旅游景点"→</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}">Ctrl + 下箭头可回显头次回复的内容</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}">消息回复速度，会在1秒之内回复你的问题</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}" @click="clickItem('帮我写一个电商抖音的文案，已口播的形式告诉我')">"帮我写一个电商抖音的文案，已口播的形式告诉我"→</div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}" style="height: 70px;position: relative;">在对话中能支持上下文，对话中断时，你可以说 "继续"
              <div
                  :style="{color:switchSocketState?'#343541':'#ececf1'}"
                  style="position: absolute;width: 10px;height: 5px;transform:
              translate(-50%,-50%);left: 38%;bottom: 10%;background: transparent;

              ">→</div>
              </div>
              <div :style="{background: switchSocketState?'#f7f7f8':'#3e3f4b',color:switchSocketState?'#343541':'#ececf1'}">如答案不如你意，可叫GPT重新生成</div>
            </div>
          </div>
        </transition>


        <!--初始化模板 plus版本-->
        <transition name="el-fade-in-linear">
          <div class="init-temp" v-if="initChatState === 0 && (isPlusType >= 2)">
              <div class="init-temp-plus-top">

               <div class="model-select" @click.stop="modelSelectClick"
               :style="{borderColor:switchSocketState?'#dcdfe6':'#5a5a64'}"
               >
                    <div class="model-select-body">
                        <div class="model-select-body-left">模型</div>
                      <div class="model-select-body-right"
                           :style="{color:switchSocketState?'#343541':'#ebebf0'}"
                      >{{modelDefaultObj.modelName}}</div>
                    </div>

                 <div class="model-select-body-icon">
                   <svg t="1683697624045" v-if="!modelSelectState" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2325" width="18px" height="18px"><path d="M767.448 622.856a29.984 29.984 0 0 1-21.288-8.824L511.992 379.912l-234.16 234.128c-11.76 11.76-30.808 11.76-42.568 0s-11.76-30.808 0-42.568l255.44-255.408a30.072 30.072 0 0 1 42.552 0l255.472 255.408a30.088 30.088 0 0 1-21.28 51.384z" fill="#999999" p-id="2326"></path></svg>
                   <svg t="1683696857178" v-else class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2362" width="18px" height="18px"><path d="M183.168 332.501333a42.666667 42.666667 0 0 1 57.621333-2.496l2.709334 2.496L512 600.96l268.501333-268.48a42.666667 42.666667 0 0 1 57.621334-2.496l2.709333 2.496a42.666667 42.666667 0 0 1 2.496 57.621333l-2.496 2.709334-298.666667 298.666666a42.666667 42.666667 0 0 1-57.621333 2.496l-2.709333-2.496-298.666667-298.666666a42.666667 42.666667 0 0 1 0-60.330667z" p-id="2363" fill="#999999"></path></svg>
                 </div>

                 <transition name="el-fade-in-linear">
                    <div class="model-options"
                         :style="{height: modelList.length * 40 +'px',borderColor:switchSocketState?'#dcdfe6':'#5a5a64'}"
                         v-if="modelSelectState">
                        <div class="model-options-item-body" :style="{borderColor:switchSocketState?'#dcdfe6':'#5a5a64'}">
                            <div class="model-options-item"
                                 @click.stop="optionsClick(item)"
                                 @mouseenter="mouseenterOptions(item,index)"
                                 @mouseleave="mouseleaveOptions(item,index)"
                                 v-for="(item,index) in modelList"
                                 :style="{color:switchSocketState?'#343541':'#ebebf0',
                                 borderBottom:(index+1 === modelList.length)?'':'1px solid '+(switchSocketState?'#dcdfe6':'#5a5a64')}"
                            >{{item.modelName}}
                                  <svg t="1683699725583" v-if="item.modelValue === modelDefaultObj.modelValue" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2898" width="18px" height="18px"><path d="M380.64 755.386L950.847 185.18c17.573-17.573 46.066-17.573 63.64 0 17.573 17.574 17.573 46.066 0 63.64l-582.59 582.59c-28.308 28.308-74.205 28.308-102.512 0L9.18 511.205c-17.573-17.573-17.573-46.066 0-63.64 17.574-17.573 46.066-17.573 63.64 0l307.82 307.821z" p-id="2899" fill="#999999"></path></svg>

                              <!--悬浮窗-->
                              <div v-if="index === modelIndex && optionsShowTipsState"
                                   :style="{marginTop: '-'+((index+1) * 40) +'px',
                                   borderColor:switchSocketState?'#dcdfe6':'#5a5a64',
                                   backgroundColor:switchSocketState?'#ffffff':'#343541'}"
                                   class="model-options-item-win">
                                   <div class="model-options-item-win-body">
                                       <div class="model-options-item-win-body-title">
                                          {{mouseenterModelDefaultObj.modelName}}
                                       </div>
                                     <div class="model-options-item-win-body-des">
                                       {{mouseenterModelDefaultObj.des}}
                                     </div>
                                     <div class="model-options-item-win-body-bot">
                                          <div class="model-options-item-win-body-bot-font">速度</div>
                                          <div>
                                            <i>
                                              <span v-for="num in mouseenterModelDefaultObj.speed"></span>
                                            </i>
                                            <i v-if="mouseenterModelDefaultObj.speed !== 5">
                                              <span v-for="num in (5- mouseenterModelDefaultObj.speed)"
                                                    :style="{backgroundColor:switchSocketState?'#dcdfe6':'#565869'}"
                                              >&nbsp;</span>
                                            </i>
                                          </div>
                                          <div class="model-options-item-win-body-bot-font">内容</div>
                                          <div>
                                            <i>
                                              <span v-for="num in mouseenterModelDefaultObj.content"></span>
                                            </i>
                                            <i v-if="mouseenterModelDefaultObj.content !== 5">
                                              <span v-for="num in (5- mouseenterModelDefaultObj.content)"
                                                    :style="{backgroundColor:switchSocketState?'#dcdfe6':'#565869'}"
                                              >&nbsp;</span>
                                            </i>
                                          </div>
                                          <div class="model-options-item-win-body-bot-font">推理</div>
                                          <div>
                                            <i>
                                              <span v-for="num in mouseenterModelDefaultObj.reasoning"></span>
                                            </i>
                                            <i v-if="mouseenterModelDefaultObj.reasoning !== 5">
                                              <span v-for="num in (5- mouseenterModelDefaultObj.reasoning)"
                                                    :style="{backgroundColor:switchSocketState?'#dcdfe6':'#565869'}"
                                              >&nbsp;</span>
                                            </i>
                                          </div>
                                         <div v-if="mouseenterModelDefaultObj.imgRecognition" class="model-options-item-win-body-bot-font">识别</div>
                                         <div v-if="mouseenterModelDefaultObj.imgRecognition">
                                           <i>
                                             <span v-for="num in mouseenterModelDefaultObj.imgRecognition"></span>
                                           </i>
                                           <i v-if="mouseenterModelDefaultObj.imgRecognition !== 5">
                                                <span v-for="num in (5- mouseenterModelDefaultObj.imgRecognition)"
                                                      :style="{backgroundColor:switchSocketState?'#dcdfe6':'#565869'}"
                                                >&nbsp;</span>
                                           </i>
                                         </div>
                                     </div>

                                   </div>
                              </div>
                            </div>
                        </div>
                    </div>


                 </transition>

               </div>

             </div>


              <div class="init-temp-plus-bot" v-if="fileModelState">
                  <div class="init-temp-plus-bot-left"
                       :style="{color:switchSocketState?'#343541':'#565869'}"
                  >PlumGPT </div>
                  <div class="init-temp-plus-bot-right">
                    <span style="margin-left: 10px;">PLUS{{isPlusType-1}}</span>
                  </div>
            </div>

            <div class="init-temp-plus-bot-file"
                  @dragenter="handleDragenter"
                  @dragover="handleDragover"
                  @drop="handleDrop"
                  v-if="!fileModelState && currentFileObj == null"
                  :style="{backgroundColor:switchSocketState?'#ffffff':'#343541',
                  borderColor:switchSocketState?'#dcdfe6':'#595963'

                  }">

                <div :style="{color:switchSocketState?'#dcdfe6':'#565869'}">
                  拖拽文件到此处 (支持文档：jpg,png,pdf,docx)
                </div>
            </div>

            <div class="init-temp-plus-bot-file"
                 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; "
                 v-if="!fileModelState && currentFileObj != null"
                 :style="{backgroundColor:switchSocketState?'#ffffff':'#343541',
                  borderColor:switchSocketState?'#dcdfe6':'#595963'

                  }"
            >
                <div style="color: #26da6f;">
                  <svg t="1692087047505" class="icon" style="width: 1.5em;height: 1.5em; margin-bottom: -7px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1682" width="200" height="200"><path d="M128 192v640h768v-512h-410.026667l-128-128H128zM96 128H384l128 128h416a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04v576a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04V160a31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96z m414.037333 502.016l180.949334-180.992 45.013333 45.013333-226.005333 226.986667-158.037334-159.018667 45.013334-44.970666 113.066666 112.981333z" fill="#26da6f" fill-opacity=".65" p-id="1683"></path></svg>
                  {{currentFileObj.name}}
                </div>
                <span title="取消文件">
                  <svg t="1692087354119" @click="cancelFile" style="width: 1.5em;height: 1.5em" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2724" width="200" height="200"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m238.4 641.6l-45.6 45.6L512 557.6 318.4 750.4l-45.6-45.6L467.2 512 273.6 318.4l45.6-45.6L512 467.2l193.6-193.6 45.6 45.6L557.6 512l192.8 193.6z" p-id="2725" fill="#d81e06"></path></svg>
                </span>
            </div>

          </div>
        </transition>



        <transition name="el-fade-in-linear">
          <div class="chatting-content" v-if="initChatState === 1">
              <div class="chatting-content-model"
                   v-if="findModel() !== ''"
                  :style="{backgroundColor:switchSocketState?'#f7f7f8':'#40414f',
                  color:switchSocketState?'#343541':'#ebebf0'}"
                   :key="modelKey"
              >
                {{findModel()}}
              </div>
              <records-list ref="records"
                            @childButtonClick="chattingBottom"
                            @call-parent-method-error="chatErrorMsg"
                            @value-sent="childSendMessage"
                            @call-parent-method="chatMsg" @chatStopNumber="chatStopNumber"  :back-color="switchSocketState" :group-code="itemCode"
                            :isPlus="isPlusType"
                            :number-key="numberKey" :records-list="recordsList"
                            :nike-name="nikeName"
                            :head-img="headImg"
                            :check-scroll-state="checkScrollState"
              ></records-list>
          </div>
        </transition>

        <div class="message-body"
               :style="{background: switchSocketState?'#fff':'#40414f',
               boxShadow:recordsList.length !==0?
               switchSocketState?'#ffffff 10px 0 15px':'#3e3f4b 10px 0 15px'
               :''
               }"
        >
            <div class="message-body-content"
                 :style="{background:recordsList.length !==0?switchSocketState?
            'linear-gradient(rgba(247, 247, 248,0.1),rgba(247, 247, 248,0.3),rgba(247, 247, 248,0.5),rgba(247, 247, 248,0.8),#ffffff)'
            :'linear-gradient(rgba(68, 70, 84,0.1),rgba(52, 53, 65,0.3),rgba(52, 53, 65,0.5),rgba(52, 53, 65,0.8),#343541)':
            switchSocketState?'#fff':'#343541'}"
            >
              <div class="message-body-top" :style="{marginLeft:sidebarState?'24%':'14%'}">


                <div class="message-body-top-left-yuy"
                     :style="{background: switchSocketState?'#fff':'#40414f',borderColor: switchSocketState?'#DCDFE6':'#40414f'}"
                >
                  <svg t="1683041332128" v-if="!voiceState" @click="voiceClick" class="icon" style="width: 23px;height: 23px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1484" width="200" height="200"><path d="M593.024 234.496l-46.165333 46.229333c0.106667 0.085333 0.149333 0.149333 0.277333 0.234667 127.552 127.658667 127.552 334.677333 0 462.336l46.122667 46.250667c153.045333-153.194667 153.045333-401.621333 0-554.816C593.173333 234.666667 593.130667 234.56 593.024 234.496z" p-id="1485" fill="#999999"></path><path d="M500.885333 327.189333c-0.042667-0.085333-0.128-0.149333-0.234667-0.213333l-46.165333 46.229333c0.042667 0.085333 0.128 0.149333 0.234667 0.256 76.48 76.565333 76.48 200.789333 0 277.397333l46.144 46.229333C603.008 595.008 603.008 429.333333 500.885333 327.189333z" p-id="1486" fill="#999999"></path><path d="M408.32 419.434667l-92.394667 92.458667 92.629333 92.714667c51.008-51.114667 51.008-133.888 0-184.938667C408.469333 419.584 408.362667 419.52 408.32 419.434667z" p-id="1487" fill="#999999"></path><path d="M512 0C229.696 0 0 229.696 0 512c0 282.282667 229.696 512 512 512 282.282667 0 512-229.717333 512-512C1024 229.696 794.282667 0 512 0zM512 981.290667C253.226667 981.290667 42.688 770.773333 42.688 512S253.226667 42.688 512 42.688 981.290667 253.226667 981.290667 512 770.773333 981.290667 512 981.290667z" p-id="1488" fill="#999999"></path></svg>
                  <svg t="1683044100750" v-else @click="voiceClick" class="icon" style="width: 27px;height: 27px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2697" width="200" height="200"><path d="M513.788813 938.289925c-113.566274 0-220.223734-44.167967-300.444149-124.388381-80.220415-80.220415-124.388382-186.877876-124.388382-300.44415s44.167967-220.227983 124.388382-300.448398c165.543834-165.548083 435.348714-165.548083 600.892548 0 165.548083 165.548083 165.548083 435.348714 0 600.892548-80.220415 80.220415-186.877876 124.388382-300.44415 124.388381z m0-785.973112c-92.538158 0-185.072066 35.453344-255.379651 105.756681-68.2001 68.204349-105.75668 158.63927-105.756681 255.3839s37.556581 187.175303 105.756681 255.379652c68.204349 68.2001 158.936697 106.054108 255.379651 105.75668 96.74888 0 187.179552-37.556581 255.379652-105.75668 140.912598-140.912598 140.912598-369.850954 0-510.759303-70.303336-70.307585-162.841494-105.75668-255.379652-105.756681z" fill="#999999" p-id="2698"></path><path d="M318.672199 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545228 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.738589c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM488.630705 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545229 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.73859c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM658.589212 341.705826h46.313693c11.047303 0 19.545228 8.497925 19.545228 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.738589c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695436v-46.738589c0-10.622407 8.497925-19.120332 19.120332-19.120332zM318.672199 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332H318.672199c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM488.630705 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.313693c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM658.589212 469.174705h46.313693c10.622407 0 19.120332 8.497925 19.120332 19.120332v46.313693c0 10.622407-8.497925 19.120332-19.120332 19.120332h-46.313693c-10.622407 0.424896-19.120332-8.073029-19.120332-18.695435v-46.73859c0-10.622407 8.497925-19.120332 19.120332-19.120332zM458.887967 660.378025h106.224066c17.420747 0 31.86722 14.446473 31.86722 31.86722s-14.446473 31.86722-31.86722 31.86722h-106.224066c-17.420747 0-31.86722-14.446473-31.86722-31.86722s14.446473-31.86722 31.86722-31.86722z" fill="#999999" p-id="2699"></path></svg>


                </div>

                <div  class="message-body-top-left">
                    <div class="textarea-selected"
                         :style="{backgroundColor:switchSocketState?'#ffffff':'#40414f',
                         borderColor:switchSocketState?'#dcdfe6':'#40414f'}"
                         :class="switchSocketState?'textarea-selected-after1':'textarea-selected-after2'"
                         v-if="roleState && rolePaleState && selectedRole ==null">
                        <div class="textarea-selected-body-role">

                            <div class="add-rol-btn" @click="addRole">新增角色</div>

                             <div class="role-item"
                                  v-for="item in roleList"
                                  :style="{height:(roleHeight(item.list.length) * 250)+'px'}">
                                <div class="role-item-title"
                                :style="{color:switchSocketState?'#40414f':'#fff'}"
                                >·{{item.class}}</div>
                                <div class="role-item-body">
                                  <div class="role-item-role" @click="selectRole(item_chile.rid)" v-for="item_chile in item.list">
                                    <div class="box">
                                      <div class="img"
                                      :class="switchSocketState?'img-1':'img-2'"
                                      >
                                        <img :src="item_chile.roleIcon" alt="">
                                      </div>
                                      <p>&nbsp;</p>
                                      <p>{{item_chile.roleName}}</p>
                                    </div>
                                  </div>
                                </div>
                             </div>


                        </div>
                    </div>


                    <div v-else-if="selectedRole != null"
                         class="textarea-selected-2">
                        <div class="textarea-selected-body">
<!--                          <div :style="{color:switchSocketState?'#40414f':'#ececf1'}">{{selectedRole==null?'暂无角色':selectedRole.roleName}}</div>-->
<!--                          <div>-->
<!--                            1-->
<!--                          </div>-->
                          <div title="喵喵~">
                          </div>
                        </div>
                    </div>
                    <textarea
                        v-if="!voiceState"
                        @keyup.ctrl.up="textUp"
                        @keyup.ctrl.down="textDown"
                        @keydown.enter="enterSend"
                        :placeholder="textPlaceholder(initChatState)"
                        @input="currentTextInput"
                        id="chatTextarea"
                        @paste="handlePaste"
                        :style="{background: switchSocketState?'#fff':'#40414f',
                        boxShadow:switchSocketState?'#ffffff 10px 0 15px':'#3e3f4b 10px 0 15px',
                              color:switchSocketState?'#40414f':'#fff',
                              borderColor: switchSocketState?'#DCDFE6':'#40414f'
                              }"
                        v-model="currentTextValue" rows="1"></textarea>
                  <div v-else class="voice-main"
                       @mouseout="recMouseout"
                       @mousedown="recStart" @mouseup="recStop"
                       :style="{background: switchSocketState?'#fff':'#40414f',
                       borderColor: switchSocketState?'#DCDFE6':'#40414f',
                       color:switchSocketState?'#40414f':'#fff'}">
                    <div class="voice-main-top" v-if="!recordingState">
                      按住&nbsp;&nbsp;说话
                    </div>
                    <div class="voice-main-bot" v-if="!recordingState">
                      限时{{recorderLength}}秒
                    </div>
                    <img @dragstart.prevent v-else src="~@/assets/voice.gif">
                  </div>
                </div>
                <div v-if="!voiceState" class="message-body-top-right"
                     :style="{background: switchSocketState?'#fff':'#40414f',borderColor: switchSocketState?'#DCDFE6':'#40414f'}"
                     style="line-height: 50px;">

                  <el-tooltip class="item" effect="dark"  content="发送消息" placement="bottom">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         v-if="!submitState"
                         @click="sendMessage('text')"
                         style="width: 16px;height: 16px;
                       padding: 7px;border-radius: 5px;"
                         viewBox="0 0 16 16"
                         :style="{background:currentTextValue?'#19c37d':'transparent',
                       color:currentTextValue?'#fff':(switchSocketState?'#dedee5':'#6b6c7b')}"
                         fill="none" class="h-4 w-4 m-1 md:m-0" stroke-width="2"><path d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" fill="currentColor"></path></svg>
                    <span style="margin-top: 10px;" v-else></span>
                  </el-tooltip>



                </div>

                <div v-else class="message-body-top-right "
                     @click="languageSelect"
                     :style="{background: switchSocketState?'#fff':'#40414f',borderColor: switchSocketState?'#DCDFE6':'#40414f'}"
                     style="line-height: 50px;">
                  <div class="message-body-top-right-top language-svg">
                    <div
                    :style="{background:`url(${require('@/assets/lang.png')})no-repeat 0 0`,
                    backgroundSize:'24px 3806px',
                    backgroundPosition: '0 '+languageObj.imgPath+'px',
                    width:'24px',
                    height: '16px',
                    overflow:'hidden',
                    margin:'0 auto',
                    marginTop:'15px'
                    }"
                    ></div>
                  </div>
                  <div class="message-body-top-right-bot">
                    语言
                  </div>
                </div>

              </div>
              <div class="message-body-bot" :style="{width:sidebarState?'100%':'80%'}">
                免费研究预览。PlumGPT可能会产生关于人员、地点或事实的不准确信息。PlumGPT 7月20日版本
                <span style="text-decoration: underline;cursor: pointer;color: #999;">
                  <router-link to="/updateLog" style="color: #999;">《查看更新日志》</router-link></span>
              </div>
            </div>
        </div>


      </div>

      <div class="chat-main-right" v-else style="background-color: #37393f;overflow: hidden;">
          <div class="chat-main-right-ai-mid" :style="{width:showRightState?'97%':'77%'}" >
              <div class="chat-main-right-ai-mid-body">
                  <div class="chat-main-right-ai-mid-body-top" v-if="aiServerDataObj != null">
                    <div >{{aiServerDataObj.serverName}}</div>

                    <div v-if="aiServerDataObj.serverType === 0" style="position: relative;">
                      <span class="zc-deng" :style="{color:aiServerDataObj.serverStatus===0?'#00e116':'red'}">·</span>
                      绘画人数：{{paintersNumber.length}}人
                      <div class="ai-img-tips" @click="viewPictureSelection"
                            style="right: -5px;cursor: pointer;"
                           v-if="aiServerDataObj.serverType === 0">
                        点击我查看图片精选
                        <svg t="1685171078717" class="icon" style="width: 17px;height: 17px;margin-left: 10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5376" width="200" height="200"><path d="M511.552 289.472l61.312 123.008 136 19.328L610.752 528l23.744 135.488-121.856-63.616-121.472 64.384 22.784-135.488-98.752-95.68 135.936-20.224z" fill="#F7BC39" p-id="5377"></path><path d="M512 1024c-282.304 0-512-229.76-512-512.064s229.696-512 512-512 512 229.696 512 512S794.304 1024 512 1024zM512 107.776a404.608 404.608 0 0 0-404.16 404.16A404.608 404.608 0 0 0 512 916.16a404.544 404.544 0 0 0 404.224-404.224A404.608 404.608 0 0 0 512 107.776z" fill="#F9D84E" p-id="5378"></path></svg>
                      </div>
                    </div>

                    <div v-if="aiServerDataObj.serverType === 1" style="position: relative;">
                      <span class="zc-deng" :style="{color:aiServerDataObj.serverStatus===0?'#00e116':'red'}">·</span>
                      当前服务器运行{{aiServerDataObj.serverStatus===0?'正常':'异常'}}
                      <div class="ai-img-tips" v-if="aiServerDataObj.serverType === 1">
                        <el-switch
                            @change="switchChangeImgShow"
                            v-model="aiImgTipsShow"
                            :inactive-text="aiImgTipsShow?'个人作画所有人可见':'个人作画仅自己可见'">
                        </el-switch>
                      </div>
                    </div>
                    <div v-if="aiServerDataObj.serverType === 3" style="position: relative;">
                      <span class="zc-deng" :style="{color:aiServerDataObj.serverStatus===0?'#00e116':'red'}">·</span>
                      服务器人数：{{aiServerDataObj.serverCount}}人
                    </div>
                  </div>

                <div class="chat-main-right-ai-mid-body-top" v-else>
                  <div >正在加载名称...</div>
                  <div  style="position: relative;">
                    <span class="zc-deng" :style="{color:aiServerDataObj.serverStatus===0?'#00e116':'red'}">·</span>
                    绘画人数：0人
                    <div class="ai-img-tips" @click="viewPictureSelection"
                         style="right: -5px;cursor: pointer;"
                         v-if="aiServerDataObj.serverType === 0">
                      点击我查看图片精选
                      <svg t="1685171078717" class="icon" style="width: 17px;height: 17px;margin-left: 10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5376" width="200" height="200"><path d="M511.552 289.472l61.312 123.008 136 19.328L610.752 528l23.744 135.488-121.856-63.616-121.472 64.384 22.784-135.488-98.752-95.68 135.936-20.224z" fill="#F7BC39" p-id="5377"></path><path d="M512 1024c-282.304 0-512-229.76-512-512.064s229.696-512 512-512 512 229.696 512 512S794.304 1024 512 1024zM512 107.776a404.608 404.608 0 0 0-404.16 404.16A404.608 404.608 0 0 0 512 916.16a404.544 404.544 0 0 0 404.224-404.224A404.608 404.608 0 0 0 512 107.776z" fill="#F9D84E" p-id="5378"></path></svg>
                    </div>
                  </div>
                </div>

                <div @scroll="chatBoxScroll" class="chat-main-right-ai-mid-body-mid" id="chat-main-right-ai-mid-body-mid" :style="{height:aiDrawImgHeight?'25%':'55%'}">
                  <div class="show-more" v-if="showMoreButton" @click="getPainting(aiServerDataObj.sid,aiServerDataObj.serverType,1)"><span>显示更多消息</span></div>
                   <span  v-for="(item,index) in paintersNumberList">
                        <div class="ai-draw-me" v-if="item.wid === s_c_ck">
                        <div class="ai-draw-me-left">
                          <div class="my-img">
                            <div class="my-img-jt-right"></div>
                              <div class="my-img-left">
                                <div class="me-img-generating" v-if="item.local">生成中...</div>
                                <img :src="item.imgBase" />
                                <div class="toolbar" style="top: 32%;" v-if="!item.local">
                                  <el-tooltip class="item" effect="dark" content="新窗口打开" placement="right">
                                    <div class="toolbar-item" @click="openImg(item.imgBase)" style="line-height: 48px;">
                                      <svg t="1685009382591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2387" width="20px" height="20px"><path d="M640 456h-118.4V320a32 32 0 0 0-64 0v136H320a32 32 0 0 0 0 64h137.6V640a32 32 0 1 0 64 0v-120H640a32 32 0 1 0 0-64z" p-id="2388" fill="#ffffff"></path><path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" p-id="2389" fill="#ffffff"></path></svg>
                                    </div>
                                  </el-tooltip>
                                  <el-tooltip class="item"  effect="dark" content="下载图片" placement="right">
                                    <div class="toolbar-item" @click="downloadImg(item.imgBase)">
                                      <svg t="1685009564581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3477" width="20px" height="20px"><path d="M940.823273 907.636364H83.176727a34.909091 34.909091 0 0 0 0 69.818181h857.646546a34.909091 34.909091 0 0 0 0-69.818181zM487.330909 818.594909a34.862545 34.862545 0 0 0 38.074182 7.540364 35.374545 35.374545 0 0 0 11.357091-7.540364l348.206545-348.16a34.909091 34.909091 0 1 0-49.384727-49.384727l-288.628364 288.581818V81.454545a34.909091 34.909091 0 1 0-69.864727 0v628.177455l-288.581818-288.581818a34.909091 34.909091 0 1 0-49.384727 49.384727l348.206545 348.16z" fill="#ffffff" p-id="3478"></path></svg>
                                    </div>
                                  </el-tooltip>
                                  <el-tooltip class="item" effect="dark"  content="续创作" placement="right">
                                    <div class="toolbar-item" @click="continueImgCreate(item)">
                                      <svg t="1685009625020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4052" width="18px" height="18px"><path d="M977.92 945.664c21.504 0 38.912 17.408 38.912 38.912 0 10.24-4.096 20.48-11.264 27.648-7.168 7.168-17.408 11.264-27.648 11.264H47.104c-10.24 0-19.968-4.096-27.648-11.264-7.168-7.168-11.264-17.408-11.264-27.648 0-10.24 4.096-20.48 11.264-27.648 7.168-7.168 17.408-11.264 27.648-11.264H977.92zM616.448 175.104l183.296 184.32c10.24 10.24 10.24 26.624 0 36.352l-393.728 396.288c-26.112 26.112-58.88 44.544-94.72 52.224l-184.32 41.984c-28.672 6.656-54.272-20.48-45.568-49.152l52.736-179.2c9.216-31.232 26.112-59.904 48.64-82.944l397.312-399.872c4.608-5.12 11.264-7.68 18.432-7.68 6.656 0 13.312 2.56 17.92 7.68z m294.4-130.56l18.432 18.432c55.296 55.808 55.296 146.432 0 202.752l-38.4 38.4c-4.608 5.12-11.264 7.68-18.432 7.68-6.656 0-13.312-2.56-18.432-7.68l-182.784-184.32c-10.24-10.24-10.24-26.624 0-36.352l38.4-38.912c26.624-26.624 62.976-41.984 100.352-41.984 38.4 0 74.24 14.848 100.864 41.984z m0 0" p-id="4053" fill="#ffffff"></path></svg>
                                    </div>
                                  </el-tooltip>
                                  <el-tooltip class="item" effect="dark" content="删除图片" placement="right">
                                    <div class="toolbar-item" @click="deleteImgAi(item.pid,index)" style="line-height: 47px;">
                                      <svg t="1685347136702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="20px" height="20px"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" fill="#ffffff" p-id="2420"></path></svg>
                                    </div>
                                  </el-tooltip>
                                </div>
                              </div>
                              <div class="my-img-right">
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">图片描述：</span>
                                  {{item.prompt}}
                                </div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">绘画指导：</span>{{item.guidanceScale}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">图片尺寸：</span>{{imgBiSelect(item.imgBi)}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">采样率：</span>{{item.sampler}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">种子随机：</span>{{item.seed}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">细节处理：</span>{{item.particulars}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">样式场景：</span>{{item.style}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">创建时间：</span>{{item.createTime}}</div>
                              </div>
                          </div>
                        </div>
                        <div class="ai-draw-me-right">
                          <div class="my-tx">
                            <span v-if="!item.userHeadImg">{{item.userNickname}}</span>
                            <img v-else :src="item.userHeadImg" alt="" />
                          </div>
                        </div>
                      </div>

                      <div class="ai-draw-to" v-else>
                        <div class="ai-draw-to-left">
                           <div class="my-tx">
                            <span v-if="!item.userHeadImg">{{item.userNickname}}</span>
                            <img v-else :src="item.userHeadImg" alt="" />
                          </div>

                        </div>
                        <div class="ai-draw-to-right" style="margin-left: 50px;">
                          <div class="my-img" >
                            <div class="my-img-jt-left"></div>
                            <div class="my-img-left-you">
                              <div class="my-img-item"><span style="color: #272938;font-weight: 600;">图片描述：</span>
                                {{item.prompt}}
                              </div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">绘画指导：</span>{{item.guidanceScale}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">图片尺寸：</span>{{imgBiSelect(item.imgBi)}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">采样率：</span>{{item.sampler}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">种子随机：</span>{{item.seed}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">细节处理：</span>{{item.particulars}}</div>
                                <div class="my-img-item"><span style="color: #272938;font-weight: 600;">样式场景：</span>{{item.style}}</div>
                               <div class="my-img-item"><span style="color: #272938;font-weight: 600;">创建时间：</span>{{item.createTime}}</div>
                            </div>
                            <div class="my-img-right-you">
                              <img :src="item.imgBase">
                              <div class="toolbar" style="top: 21%;">
                                  <el-tooltip class="item" effect="dark" content="新窗口打开" placement="right">
                                    <div class="toolbar-item" @click="openImg(item.imgBase)" style="line-height: 48px;">
                                      <svg t="1685009382591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2387" width="20px" height="20px"><path d="M640 456h-118.4V320a32 32 0 0 0-64 0v136H320a32 32 0 0 0 0 64h137.6V640a32 32 0 1 0 64 0v-120H640a32 32 0 1 0 0-64z" p-id="2388" fill="#ffffff"></path><path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" p-id="2389" fill="#ffffff"></path></svg>
                                    </div>
                                  </el-tooltip>
                                  <el-tooltip class="item"  effect="dark" content="下载图片" placement="right">
                                    <div class="toolbar-item" @click="downloadImg(item.imgBase)">
                                      <svg t="1685009564581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3477" width="20px" height="20px"><path d="M940.823273 907.636364H83.176727a34.909091 34.909091 0 0 0 0 69.818181h857.646546a34.909091 34.909091 0 0 0 0-69.818181zM487.330909 818.594909a34.862545 34.862545 0 0 0 38.074182 7.540364 35.374545 35.374545 0 0 0 11.357091-7.540364l348.206545-348.16a34.909091 34.909091 0 1 0-49.384727-49.384727l-288.628364 288.581818V81.454545a34.909091 34.909091 0 1 0-69.864727 0v628.177455l-288.581818-288.581818a34.909091 34.909091 0 1 0-49.384727 49.384727l348.206545 348.16z" fill="#ffffff" p-id="3478"></path></svg>
                                    </div>
                                  </el-tooltip>
                                  <el-tooltip class="item" effect="dark" content="续创作" placement="right">
                                    <div class="toolbar-item" @click="continueImgCreate(item)" >
                                      <svg t="1685009625020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4052" width="18px" height="18px"><path d="M977.92 945.664c21.504 0 38.912 17.408 38.912 38.912 0 10.24-4.096 20.48-11.264 27.648-7.168 7.168-17.408 11.264-27.648 11.264H47.104c-10.24 0-19.968-4.096-27.648-11.264-7.168-7.168-11.264-17.408-11.264-27.648 0-10.24 4.096-20.48 11.264-27.648 7.168-7.168 17.408-11.264 27.648-11.264H977.92zM616.448 175.104l183.296 184.32c10.24 10.24 10.24 26.624 0 36.352l-393.728 396.288c-26.112 26.112-58.88 44.544-94.72 52.224l-184.32 41.984c-28.672 6.656-54.272-20.48-45.568-49.152l52.736-179.2c9.216-31.232 26.112-59.904 48.64-82.944l397.312-399.872c4.608-5.12 11.264-7.68 18.432-7.68 6.656 0 13.312 2.56 17.92 7.68z m294.4-130.56l18.432 18.432c55.296 55.808 55.296 146.432 0 202.752l-38.4 38.4c-4.608 5.12-11.264 7.68-18.432 7.68-6.656 0-13.312-2.56-18.432-7.68l-182.784-184.32c-10.24-10.24-10.24-26.624 0-36.352l38.4-38.912c26.624-26.624 62.976-41.984 100.352-41.984 38.4 0 74.24 14.848 100.864 41.984z m0 0" p-id="4053" fill="#ffffff"></path></svg>
                                    </div>
                                  </el-tooltip>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                   </span>

                </div>


                <div class="chat-main-right-ai-mid-body-bot">
                  <div class="chat-main-right-ai-mid-body-bot-content">

                    <el-tabs type="border-card">
                      <el-tab-pane label="基本设定">
                        <div class="el-tab-pane-body">

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">
                              * 图片描述</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content">
                              <textarea v-model="prompt" placeholder="图片描述，开拓你的想象力，尽情发挥创作"></textarea>
                          </div>


                          <div class="el-tab-pane-body-title" style="margin-top: 10px;">
                            <div class="el-tab-pane-body-title-left">绘画风格</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content ai-draw-style-body">
                            <div class="ai-draw-style" v-for="(item,index) in aiDrawStyleData"
                            :class="{'ai-draw-style-active':index===aiImgStyleActive}"
                                 @click="aiImgStyleClick(item,index)"
                            >
                              <div class="ai-draw-style-top">
                                <img :src="item.img" alt="" :title="item.value"/>
                              </div>
                              <div class="ai-draw-style-bot">{{item.value}}</div>
                            </div>
                          </div>

                          <div class="el-tab-pane-body-title" style="margin-top: 10px;">
                            <div class="el-tab-pane-body-title-left">艺术家风格</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content ai-draw-style-body">
                            <div class="ai-draw-style" v-for="(item,index) in artistStyleData"
                                 :class="{'ai-draw-style-active':index===artistStyleActive}"
                                 @click="artistStyleClick(item,index)"
                            >
                              <div class="ai-draw-style-top">
                                <img :src="item.img" alt="" :title="item.value"/>
                              </div>
                              <div class="ai-draw-style-bot">{{item.value}}</div>
                            </div>
                          </div>

                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="高级设定">
                        <div class="el-tab-pane-body">

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">图片尺寸</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content">
                            <el-radio-group v-model="aiDrawWidthHeight">
                              <el-radio-button label="512*512">1:1</el-radio-button>
                              <el-radio-button label="768*576">4:3</el-radio-button>
                              <el-radio-button label="576*768">3:4</el-radio-button>
                              <el-radio-button label="432*768">9:16</el-radio-button>
                              <el-radio-button label="768*432">16:9</el-radio-button>
                              <el-radio-button label="768*512">3:2</el-radio-button>
                            </el-radio-group>
                          </div>

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">描述指导</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-tips">更强的指导会令你的画作，与创作构思描述更相近</div>

                          <div class="el-tab-pane-body-content" style="padding-left: 15px;">
                            <el-slider
                                v-model="guidance_scale"
                                :step="0.5"
                                :max="20.0"
                                :min="1.0"
                                show-input>
                            </el-slider>
                          </div>

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">图像细节处理</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-tips">再等片刻，尝试通过更多步骤提升画面品质</div>

                          <div class="el-tab-pane-body-content" style="padding-left: 15px;">
                            <el-slider
                                v-model="steps"
                                :step="1"
                                :max="100"
                                :min="1"
                                show-input>
                            </el-slider>
                          </div>

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">随机种子（如果不填写则默认随机产生）</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content">
                            <input type="number" v-model="seed" placeholder="种子数量，非必填">
                          </div>

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">采样器</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content">
                            <el-radio-group v-model="sampler">
                              <el-radio-button label="ddim"></el-radio-button>
                              <el-radio-button label="lmsd"></el-radio-button>
                              <el-radio-button label="pndm"></el-radio-button>
                              <el-radio-button label="euler_d"></el-radio-button>
                              <el-radio-button label="euler_a_d"></el-radio-button>
                              <el-radio-button label="dpm"></el-radio-button>
                            </el-radio-group>
                          </div>

                          <div class="el-tab-pane-body-title">
                            <div class="el-tab-pane-body-title-left">规避描述</div>
                            <div class="el-tab-pane-body-title-right"></div>
                          </div>

                          <div class="el-tab-pane-body-content">
                            <textarea v-model="negative_prompts" placeholder="请输入作画时所要避免描述文案"></textarea>
                          </div>

                        </div>
                      </el-tab-pane>

                    </el-tabs>

                  </div>
                  <div class="create-ai-img">
                      <div class="create-ai-img-btn-submit" @click="createImg">开始创作</div>
                      <div class="create-ai-img-left-res" @click="resAiImgObj">重置表单</div>
                      <div class="create-ai-img-tips" @click="usageGuide">《查看使用攻略》</div>
                  </div>
                </div>
              </div>
          </div>
          <div class="chat-main-right-ai-right"
               :style="{width:showRightState?'0%':'20%'}">
            <div class="chat-main-right-ai-right-bnt" @click="showRight">
              <svg v-if="showRightState" t="1682921808624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7395" ><path d="M161.1 511.2l373.6-373.6c26.4-26.4 61-39.5 95.6-39.5 34.6 0 69.2 13.2 95.6 39.5 52.7 52.7 52.7 138.5 0 191.2L400.4 654.3c-10.3 10.3-27 10.3-37.3 0-10.3-10.3-10.3-27 0-37.3l325.4-325.4c32.2-32.2 32.2-84.5 0-116.6-32.2-32.2-84.5-32.2-116.6 0L198.4 548.5M630.3 98.1" fill="#2197EF" p-id="7396"></path><path d="M371 375.9l341.2 341.2c42.5 42.5 42.5 111.4 0 153.9s-111.4 42.5-153.9 0L217 529.9" fill="#CEE8FA" p-id="7397"></path><path d="M198.4 548.5l336.3 336.3c25.5 25.5 59.5 39.6 95.6 39.6 36.1 0 70.1-14.1 95.6-39.6 52.7-52.7 52.7-138.5 0-191.2L389.6 357.3m-74.6 0l17.4 17.4 19.8 19.8 336.3 336.3c32.2 32.2 32.2 84.5 0 116.6-15.6 15.6-36.3 24.2-58.3 24.2s-42.7-8.6-58.3-24.2L235.7 511.2l-20.5-20.5-16.7-16.7" fill="#2197EF" p-id="7398"></path></svg>
              <svg v-else t="1682921886717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8362" ><path d="M836.8 551.2L462 176.4c-32.3-32.3-84.8-32.3-117 0-32.3 32.3-32.3 84.8 0 117L671.5 620c10.3 10.3 10.3 27.1 0 37.4-10.3 10.3-27.1 10.3-37.4 0L307.6 330.8c-52.9-52.9-52.9-139 0-191.8 26.4-26.4 61.2-39.7 95.9-39.7s69.5 13.2 95.9 39.7l374.8 374.8M403.5 99.3" fill="#2197EF" p-id="8363"></path><path d="M818.1 532.5L475.8 874.9c-42.6 42.6-111.8 42.6-154.4 0-42.7-42.6-42.7-111.8 0-154.4l342.4-342.4" fill="#CEE8FA" p-id="8364"></path><path d="M645 359.4L307.6 696.8c-52.9 52.9-52.9 139 0 191.8 25.6 25.6 59.7 39.7 95.9 39.7s70.3-14.1 95.9-39.7l337.4-337.4m0-74.8L820 493.2l-20.6 20.6L462 851.2c-15.6 15.6-36.4 24.2-58.5 24.2s-42.9-8.6-58.5-24.2c-32.3-32.3-32.3-84.8 0-117l337.4-337.4 19.9-19.9 17.5-17.5" fill="#2197EF" p-id="8365"></path></svg>
            </div>
            <div class="panel-body">

              <div class="panel-title">
                {{showRightStateDrawText}}
              </div>

              <div class="number-of-painters">
                  <div v-for="(item,index) in paintersNumber" class="number-of-painters-item">
                    <el-tooltip  placement="bottom" v-if="item.wid !== s_c_ck" effect="light">
                      <div slot="content"  class="my-tooltip-content">
                          <div class="my-tooltip-content-item" v-on:click="hisInformation(item.wid)">
                            <svg t="1685157240694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3385" width="200" height="200"><path d="M950.633412 155.602824H73.366588A73.456941 73.456941 0 0 0 0 228.969412v561.031529a73.441882 73.441882 0 0 0 73.366588 73.366588h877.266824A73.441882 73.441882 0 0 0 1024 790.000941V228.969412a73.456941 73.456941 0 0 0-73.366588-73.366588zM993.882353 790.000941a43.294118 43.294118 0 0 1-43.248941 43.248941H73.366588A43.294118 43.294118 0 0 1 30.117647 790.000941V228.969412a43.294118 43.294118 0 0 1 43.248941-43.248941h877.266824A43.294118 43.294118 0 0 1 993.882353 228.969412v561.031529z" p-id="3386" fill="#999999"></path><path d="M150.362353 589.718588c34.063059 12.016941 83.215059 15.224471 106.902588 15.224471 25.825882 0 76.378353-4.186353 110.095059-15.841883 16.850824-6.460235 20.389647-17.468235 20.389647-25.569882 0-59.964235-41.140706-110.366118-96.632471-124.822588 23.552-11.956706 39.875765-36.156235 39.875765-64.316235 0-39.905882-32.466824-72.387765-72.387765-72.387765s-72.387765 32.466824-72.387764 72.387765c0 28.16 16.338824 52.359529 39.875764 64.316235-55.491765 14.471529-96.632471 64.858353-96.63247 124.822588 0.030118 16.353882 11.670588 21.865412 20.901647 26.187294z m50.928941-215.326117c0-31.608471 25.720471-57.328941 57.328941-57.328942s57.328941 25.720471 57.328941 57.328942-25.720471 57.328941-57.328941 57.328941-57.328941-25.735529-57.328941-57.328941z m57.328941 75.068235c62.900706 0 114.070588 51.169882 114.070589 114.070588 0 3.659294-1.28 7.890824-10.480942 11.429647-31.503059 10.872471-81.091765 14.923294-104.944941 14.923294-22.723765 0-69.737412-3.026824-101.180235-14.08-9.712941-4.592941-11.550118-6.550588-11.550118-12.272941 0.015059-62.900706 51.184941-114.070588 114.085647-114.070588zM451.764706 328.779294c0 4.141176 6.776471 7.529412 15.058823 7.529412h391.529412c8.282353 0 15.058824-3.388235 15.058824-7.529412s-6.776471-7.529412-15.058824-7.529412H466.823529c-8.282353 0-15.058824 3.388235-15.058823 7.529412zM451.764706 449.249882c0 4.141176 6.776471 7.529412 15.058823 7.529412h391.529412c8.282353 0 15.058824-3.388235 15.058824-7.529412s-6.776471-7.529412-15.058824-7.529411H466.823529c-8.282353 0-15.058824 3.388235-15.058823 7.529411zM451.764706 569.720471c0 4.141176 6.776471 7.529412 15.058823 7.529411h391.529412c8.282353 0 15.058824-3.388235 15.058824-7.529411s-6.776471-7.529412-15.058824-7.529412H466.823529c-8.282353 0-15.058824 3.388235-15.058823 7.529412zM135.529412 690.191059c0 4.141176 6.776471 7.529412 15.058823 7.529412h707.764706c8.282353 0 15.058824-3.388235 15.058824-7.529412s-6.776471-7.529412-15.058824-7.529412H150.588235c-8.282353 0-15.058824 3.388235-15.058823 7.529412z" p-id="3387" fill="#999999"></path></svg>
                            他的信息</div>
                          <div class="my-tooltip-content-item" v-on:click="hisWorks(item.wid,item.userNickname)">
                            <svg t="1685157317818" class="icon" viewBox="0 0 1136 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4319" width="200" height="200"><path d="M265.49969068 634.20671297l226.98046212 101.72058835c13.73768206 5.94270525 20.22063285 9.9559604 33.95831491 9.9559604a66.21871393 66.21871393 0 0 0 33.26371298-8.79829075 26.39487161 26.39487161 0 0 1 4.01325517-2.23816145l214.32327253-90.1438899a27.47536342 27.47536342 0 0 1 20.83805694 0l75.32571605 30.94837302c18.13682709 7.48626476 18.29118345 29.86788122 0.30871205 37.50850235L537.70645411 856.86520857a27.16665206 27.16665206 0 0 1-21.45548101-0.15435635L178.28856414 707.3714461c-17.75093722-7.94933248-17.44222517-30.02223758 0.61742408-37.4313245l86.59370245-35.73340863z m-10.26467244-175.11685432a27.01229571 27.01229571 0 0 1 20.45216636 1e-8l222.27260572 90.99284749 2.85558551 0.92613613a109.74709868 109.74709868 0 0 0 62.05110241-1.0804918L777.96153056 459.24421434a27.47536342 27.47536342 0 0 1 20.83805626-0.15435569l76.17467432 31.41144074c17.98247141 7.40908693 18.36836129 29.55916918 0.61742408 37.35414666L537.78363194 677.27203068a26.93511786 26.93511786 0 0 1-21.68701453 0L178.28856414 527.9326239c-17.75093722-7.87215465-17.44222517-29.94505907 0.61742408-37.35414599zM516.32815162 166.58528454a27.39818558 27.39818558 0 0 1 21.1467683-1e-8L876.05475294 311.06247787c17.75093722 7.5634426 17.9052929 29.40481349 0.30871204 37.19979031l-338.57983304 149.72529666a26.93511786 26.93511786 0 0 1-21.68701453 0L177.43960654 348.18508966c-17.51940301-7.71779897-17.36504733-29.6363477 0.30871204-37.19978964z" p-id="4320" fill="#999999"></path></svg>
                            他的作品</div>
                      </div>
                      <div class="number-of-painters-item-top">
                        <img v-if="item.userHeadImg" :src="item.userHeadImg">
                        <div v-else>{{item.userNickname}}</div>
                        <span class="number-of-painters-item-bot">{{item.userUsername}}</span>
                      </div>
                    </el-tooltip>

                    <div v-else class="number-of-painters-item-top">
                      <img v-if="item.userHeadImg" :src="item.userHeadImg">
                      <div v-else>{{item.userNickname}}</div>
                      <span class="number-of-painters-item-bot">{{item.userUsername}}</span>
                    </div>


                  </div>
              </div>
            </div>
          </div>
      </div>

    <!--设置弹出层-->
    <div class="keep-chat" @click="settingsState = !settingsState" v-if="settingsState">
        <div class="settings-main" @click.stop="" :style="{ backgroundColor:switchSocketState?'#fff':'#202123'}">
          <div class="settings-main-title">
            <div class="settings-main-title-main">
              <div class="settings-main-title-main-left" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">设置</div>
              <div class="settings-main-title-main-right">
                <span @click="settingsState = !settingsState" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">×</span>
              </div>
            </div>
          </div>

          <div class="settings-main-bottom">
              <div class="settings-main-bottom-left">
                <div class="settings-main-bottom-left-item" @click="settingsIndex = 0" :style="{backgroundColor:settingsIndex===0?'#343541':switchSocketState?'#ffffff':'#202123'}">
                  <div class="settings-main-bottom-left-item-main" >
                      <div>
                        <svg stroke="currentColor" :style="{color:settingsIndex===0?'#ffffff':switchSocketState?'#343541':'#89899b'}" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" class="h-4 w-4 h-5 w-5 fill-gray-800 group-radix-state-active:fill-white dark:fill-gray-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
                      </div>
                      <div :style="{color:settingsIndex===0?'#ffffff':switchSocketState?'#343541':'#89899b'}">
                        基本设置
                      </div>
                  </div>
                </div>
                <div class="settings-main-bottom-left-item" @click="settingsIndex = 1" :style="{backgroundColor:settingsIndex===1?'#343541':switchSocketState?'#ffffff':'#202123'}">
                  <div class="settings-main-bottom-left-item-main" >
                    <div>

                      <svg stroke="currentColor" :style="{color:settingsIndex===1?'#ffffff':switchSocketState?'#343541':'#89899b'}" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" class="h-4 w-4 h-5 w-5 fill-gray-800 group-radix-state-active:fill-white dark:fill-gray-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"></path><path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"></path><path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"></path></svg>
                    </div>
                    <div :style="{color:settingsIndex===1?'#ffffff':switchSocketState?'#343541':'#89899b'}">
                      会话管理
                    </div>
                  </div>
                </div>
              </div>

              <div class="settings-main-bottom-right" v-if="settingsIndex === 0">
                  <div class="settings-main-bottom-right-main">
                      <div class="settings-main-bottom-right-main-left" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">
                        亮度调节
                      </div>
                      <div class="settings-main-bottom-right-main-right">
                        <el-switch
                            @change="switchSocket"
                            v-model="switchSocketState"
                            active-color="#343541"
                            inactive-color="#999999">
                        </el-switch>
                      </div>
                  </div>
                  <div class="settings-main-bottom-right-main">
                    <div class="settings-main-bottom-right-main-left" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">
                      清空所有聊天记录
                    </div>
                    <div class="settings-main-bottom-right-main-right">
                      <el-button type="danger" v-if="chattingList.length >= 5" @click="deleteAll" size="mini">清空</el-button>
                      <el-button type="danger" v-else disabled size="mini">清空</el-button>
                    </div>
                  </div>
              </div>

              <div class="settings-main-bottom-right" v-if="settingsIndex === 1">
                <div class="settings-main-bottom-right-main">
                  <div class="settings-main-bottom-right-main-left" style="width: 60%;border: none;"  :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">
                    设置对话轮数
                  </div>
                  <div class="settings-main-bottom-right-main-right" style="width: 40%;border: none;">
                    <el-input v-model="userSettingsInfo.dialogueCount"  @blur="dialogueCountBlur"  />
                  </div>
                  <div class="settings-main-bottom-right-main-tips" :style="{color:switchSocketState?'#999999':'#525464'}">
                    默认对话为3轮，你问一句，gpt回答一句，这为一轮，设置更多轮数，GPT记录更多上下文，更有意义的帮助你回答问题，
                    最多设置10轮对话，默认设置3轮，消耗1额度，轮数越高消耗的key也不一样
                  </div>
                </div>

                <div class="settings-main-bottom-right-main">
                  <div class="settings-main-bottom-right-main-left" style="width: 60%;border: none;"  :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">
                    设置聊天温度值
                  </div>
                  <div class="settings-main-bottom-right-main-right" style="width: 40%;border: none;">
                    <el-input v-model="userSettingsInfo.temperature" @blur="temperatureBlur" />
                  </div>
                  <div class="settings-main-bottom-right-main-tips" :style="{color:switchSocketState?'#999999':'#525464'}">
                    默认为0.5，如果觉得GPT回答比较单调，可设置温度值，让它更随机性，
                    使用什么采样温度，介于 0 和 2 之间。较高的值（如 0.8）将使输出更加随机，而较低的值（如 0.2）将使其更加集中和确定性。
                  </div>
                </div>
              </div>

          </div>

        </div>
    </div>

    <div class="keep-chat" v-if="toolboxState" @click="toolboxState = !toolboxState">
      <div class="settings-main" @click.stop="" :style="{ backgroundColor:switchSocketState?'#fff':'#202123'}">
        <div class="settings-main-title">
          <div class="settings-main-title-main">
            <div class="settings-main-title-main-left" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">工具箱</div>
            <div class="settings-main-title-main-right">
              <span @click="toolboxState = !toolboxState" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">×</span>
            </div>
          </div>
        </div>

        <div class="settings-main-bottom">
          <div class="settings-main-bottom-left">
            <div class="settings-main-bottom-left-item" @click="toolboxIndex = 0" :style="{backgroundColor:toolboxIndex===0?'#343541':switchSocketState?'#ffffff':'#202123'}">
              <div class="settings-main-bottom-left-item-main" >
                <div>
                  <svg t="1688104531608" :style="{color:toolboxIndex===0?'#ffffff':switchSocketState?'#343541':'#89899b'}" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1970" width="200" height="200"><path d="M550.912 961.536h-3.072c-72.704-1.024-125.952-52.224-145.408-138.24C368.64 671.744 307.2 677.888 222.208 687.104c-49.152 5.12-104.448 11.264-146.432-26.624-33.792-30.72-49.152-81.92-49.152-160.768C26.624 258.048 223.232 61.44 464.896 61.44c193.536 0 366.592 130.048 420.864 316.416 6.144 21.504-6.144 44.032-27.648 51.2-21.504 6.144-44.032-6.144-51.2-27.648-44.032-151.552-184.32-257.024-342.016-257.024-196.608 0-356.352 159.744-356.352 356.352 0 69.632 14.336 93.184 22.528 100.352 14.336 13.312 47.104 9.216 82.944 6.144 87.04-9.216 219.136-23.552 269.312 199.68 16.384 73.728 54.272 73.728 66.56 74.752h1.024C634.88 879.616 768 754.688 808.96 595.968c6.144-21.504 27.648-34.816 50.176-29.696 21.504 6.144 34.816 27.648 29.696 50.176-49.152 185.344-205.824 345.088-337.92 345.088z" fill="#ffffff" p-id="1971"></path><path d="M240.64 458.752m-69.632 0a69.632 69.632 0 1 0 139.264 0 69.632 69.632 0 1 0-139.264 0Z" fill="#ffffff" p-id="1972"></path><path d="M442.368 296.96m-52.224 0a52.224 52.224 0 1 0 104.448 0 52.224 52.224 0 1 0-104.448 0Z" fill="#ffffff" p-id="1973"></path><path d="M658.432 366.592m-43.008 0a43.008 43.008 0 1 0 86.016 0 43.008 43.008 0 1 0-86.016 0Z" fill="#ffffff" p-id="1974"></path><path d="M518.144 654.336c-17.408 0-32.768-10.24-38.912-27.648-7.168-21.504 4.096-45.056 25.6-52.224L946.176 419.84c21.504-7.168 45.056 4.096 52.224 25.6 7.168 21.504-4.096 45.056-25.6 52.224L531.456 652.288c-5.12 1.024-9.216 2.048-13.312 2.048z" fill="#ffffff" p-id="1975"></path></svg>
                </div>
                <div :style="{color:toolboxIndex===0?'#ffffff':switchSocketState?'#343541':'#89899b'}">
                  AI绘画入口
                </div>
              </div>
            </div>

          </div>

          <div class="settings-main-bottom-right" v-if="toolboxIndex === 0">
            <div class="settings-main-bottom-right-main">
              <div class="settings-main-bottom-right-main-top">
                  <div  class="settings-main-bottom-right-main-top-top">
                    <img src="https://plumgpt.com/chat/4d5bb63b-ad05-49bf-85e2-8680a9d9212d.jpg">
                    <img src="https://plumgpt.com/chat/7eca0396-a5fa-4a5b-8fb4-4d5e1693724f.jpg">
                    <img src="https://plumgpt.com/chat/717bffc0-851a-4c8f-8710-a0c9f9615ffc.jpg">
                  </div>
                  <div  class="settings-main-bottom-right-main-bot" :style="{color:switchSocketState?'#999999':'#525464'}">
                    当前AI绘画基于调用sd接口方式实现，平均生成图时间5秒内出图，每次生成图片扣减3额度，
                    在进行AI作画描述的时候，尽量选择一种作画风格，种子可随机生成，也可自定义输入种子数量，
                    感谢你的使用，有任何问题和反馈请联系群主或管理协助
                  </div>
              </div>
              <div class="settings-main-bottom-right-main-left" :style="{ color:switchSocketState?'#343541':'#d9d9e3'}">
                {{!aiDrawState?'切换绘画':'切换聊天'}}
              </div>
              <div class="settings-main-bottom-right-main-right">
                <el-switch
                    @change="aiDrawButton"
                    v-model="aiDrawState"
                    active-color="#343541"
                    inactive-color="#999999">
                </el-switch>
              </div>
            </div>
          </div>


        </div>

      </div>
    </div>

    <!--刚刚进来的提示层-->
    <div class="keep-chat" v-if="keepSate">
        <div class="keep-html">
            <div class="keep-body">
                <div class="keep-title">PlumGPT</div>
                <div class="keep-head-title" v-if="nextIndex===0">这是一个免费的研究预览。</div>
                <div class="keep-head-title" v-if="nextIndex===1">欢迎你使用PLUM GPT</div>
                <div class="keep-head-title" v-if="nextIndex===2">很乐意收到你的反馈！</div>

                <div class="keep-content" v-if="nextIndex === 0">
                  <div class="keep-content-item">
                    <div class="keep-content-item-left">🔬</div>
                    <div class="keep-content-item-right">
                      <br/>
                      你有任何问题可以直接Q群：237343691联系群主来处理你的问题
                    </div>
                  </div>
                  <div class="keep-content-item">
                    <div class="keep-content-item-left">🚨</div>
                    <div class="keep-content-item-right" style="padding-top: 10px">
                      如果该系统生成没有你想要的答案，试着可以跟换一个描述对它说，或许它会给你不一样的答案，
                      可以尝试不要重复提问同一个问题，不然没有你想要的答案了哦！
                    </div>
                  </div>
                </div>

                <div class="keep-content" v-if="nextIndex === 1">
                  <div class="keep-content-item">
                    <div class="keep-content-item-left">🦾</div>
                    <div class="keep-content-item-right">
                      <br/>
                      在未来的道路，我们会增强系统的升级，以便你日后在工作中的使用
                    </div>
                  </div>
                  <div class="keep-content-item">
                    <div class="keep-content-item-left">🔐</div>
                    <div class="keep-content-item-right">
                      <br/>
                      如果想升级账号权限，具体可以加群聊，联系群主升级
                    </div>
                  </div>
                </div>


              <div class="keep-content" v-if="nextIndex === 2">
                <div class="keep-content-item">
                  <div class="keep-content-item-left">👍</div>
                  <div class="keep-content-item-right">
                    <br/>
                    这个系统针对对话进行了优化。让我们知道某个特定的回应是好的还是没有帮助的。
                  </div>
                </div>
                <div class="keep-content-item">
                  <div class="keep-content-item-left">💬</div>
                  <div class="keep-content-item-right" style="line-height: 85px;">
                    在我们的群聊中联系管理或群主随时分享您的反馈。
                  </div>
                </div>
              </div>

                <div class="keep-btn">
                    <div v-if="nextIndex === 1 || nextIndex === 2">
                      <span @click="back">回退</span>
                    </div>
                    <div v-else>
                    </div>
                    <div class="last-next">
                      <span @click="next">下一步</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="keep-chat" v-if="payKeepState">
        <div class="pay-keep-body"
        :style="{background: switchSocketState?'#fff':'#202123',
                              color:switchSocketState?'#202123':'#fff'}"
        >
          <div class="pay-keep-body-title">
            <div class="pay-keep-body-title-body">
                <div class="pay-keep-body-title-left">你的账户</div>
                <div class="pay-keep-body-title-right">
                  <span @click="payKeepState = false">×</span>
                </div>
            </div>
          </div>
            <div class="pay-keep-body-content">
              <div class="pay-keep-body-left">

                <div class="to-skip-pay-body">
                    <div class="to-skip-pay-body-title"
                         :style="{ color:switchSocketState?'#202123':'#fff'}"

                    >
                        普通用户
                    </div>
                  <div class="to-skip-pay-body-btn"
                  style="background-color: #e3e3e9;color: #a9abb0;"
                  >未升级
                  </div>

<!--                  <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-green-700" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>-->

                 <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                         <svg stroke="currentColor" fill="none" color="#acacbe" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-gray-400" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                    需求低时可用
                    </div>
                 </div>

                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                      <svg stroke="currentColor" fill="none" color="#acacbe" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-gray-400" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                      标准响应速度
                    </div>
                  </div>

                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                      <svg stroke="currentColor" fill="none" color="#acacbe" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-gray-400" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                      定期模型更新
                    </div>
                  </div>


                </div>

              </div>
              <div class="pay-keep-body-mid">
                <div></div>
              </div>
              <div class="pay-keep-body-right">
                <div class="to-skip-pay-body">
                  <div class="to-skip-pay-body-title"  :style="{ color:switchSocketState?'#202123':'#fff'}">
                    PLUS用户
                  </div>
                  <div class="to-skip-pay-body-btn" @click="wallet"
                       style="background-color: #10a37f;color: #ffffff;cursor: pointer;"
                  >点击升级
                  </div>


                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                      <svg stroke="currentColor" fill="none" color="#10a37f" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-green-700" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                      即使需求很高也可用
                    </div>
                  </div>

                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                      <svg stroke="currentColor" color="#10a37f" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-green-700" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                      更快的响应速度
                    </div>
                  </div>

                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                      <svg stroke="currentColor" color="#10a37f" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 h-5 w-5 text-green-700" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="to-skip-pay-body-tips-right">
                      优先使用新功能
                    </div>
                  </div>

                  <div class="to-skip-pay-body-tips">
                    <div class="to-skip-pay-body-tips-left">
                     </div>
                    <div class="to-skip-pay-body-tips-right" style="font-size: 12px;">
                      <span style="text-decoration: underline;cursor: pointer;" @click="help">我需要有关额度问题的帮助</span>
                    </div>
                  </div>



                </div>
              </div>
            </div>
        </div>
    </div>

    <el-dialog
        title="语言选择"
        :visible.sync="languageState"
        width="50%"
    >
      <el-form ref="form" >
        <el-form-item label="语音识别">
          <el-select v-model="languageObj" style="width: 100%;">
            <el-option v-for="(item,index) in languageSelectedList" :label="item.name" :key="item.value" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="如果选择多方言">
          <br/>
          支持23种方言（上海话、四川话、武汉话、贵阳话、昆明话、西安话、郑州话、太原话、兰州话、银川话、西宁话、南京话、合肥话、南昌话、长沙话、苏州话、杭州话、济南话、天津话、石家庄话、黑龙江话、吉林话、辽宁话）
        </el-form-item>
      </el-form>

    </el-dialog>

    <span class="create-img-server-class">
      <el-dialog
          title="搭建绘画室"
          :visible.sync="createImgServerState"
          width="50%"
      >
      <el-form  label-width="100px">
        <el-form-item label="服务器名称">
          <el-input style="color: #fff;" maxlength="15" placeholder="最多输入15个字符" v-model="currentServerName"></el-input>
        </el-form-item>

        <el-form-item label="好友账号">
          <el-input style="color: #fff;" placeholder="输入好友的登录账号，即可搜索好友并添加" v-model="touser">
            <el-button slot="append" @click="searchFriends" icon="el-icon-circle-plus-outline"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="好友列表" v-if="friendsList.length !== 0">
          <div class="friends-list">
              <div class="friends-item" v-for="(item,index) in friendsList">
                <div class="friends-item-chat" @click="deleteFriends(index)">×</div>
                <div  class="friends-item-top">{{item.nickname}}</div>
                <div  class="friends-item-bot">{{item.username}}</div>
              </div>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button @click="createServerOnSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </span>

    <span class="create-img-server-class" v-if="hisInformationObj!=null">
      <el-dialog
          :title="hisInformationObj.nickname+'的绘画信息'"
          :visible.sync="hisInformationState"
          width="50%"
      >
      <el-form>
        <el-descriptions title="绘画战绩">
            <el-descriptions-item label="昵称">{{hisInformationObj.nickname}}</el-descriptions-item>
            <el-descriptions-item label="加入时间">{{hisInformationObj.time}}</el-descriptions-item>
            <el-descriptions-item label="绘画数量">{{hisInformationObj.count}}张绘画</el-descriptions-item>
            <el-descriptions-item label="绘画称号">{{hisInformationObj.dan}}</el-descriptions-item>
            <el-descriptions-item label="账号类型">
              {{hisInformationObj.plus>=2?'PLUS会员':'普通用户'}}
            </el-descriptions-item>
          <el-descriptions-item label="作图是否展示">{{hisInformationObj.isShowImg}}</el-descriptions-item>
          <el-descriptions-item label="个人备注">暂无备注</el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-dialog>
    </span>


    <span class="create-img-server-class">
      <el-dialog
          :title="hisWorksNickname+'的作品合集'"
          :visible.sync="hisWorksState"
          width="75%"
      >
    <iframe  :src="hisWorksUrl" width="100%" height="500px" frameborder="0" scrolling="auto"></iframe>
    </el-dialog>
    </span>

    <span class="create-img-server-class">
      <el-dialog
          title="绘画须知"
          :visible.sync="imgUsingStandardsState"
          width="50%"
      >
      <el-form>
        <el-form-item style="color: #c0c4cc;">
          尊敬的用户，欢迎使用我们的图片生成系统。我们致力于为用户提供高质量、有趣、创意的图片生成服务。但是，请注意，我们的系统仅限于合法、合规、健康的用途。我们强烈要求用户遵守国家相关法律法规和社会道德标准，不得制作、传播和使用任何违法、不良、有害的图片内容，包括但不限于色情、暴力、恐怖、歧视等。同时，我们也会对用户生成的图片进行自动打分和筛选，将优质的图片加入精选图集，为更多用户提供参考和分享。如果您发现任何不符合规范的图片，请及时联系我们的客服人员，我们将会立即处理。感谢您的理解和支持！
          <br/>
          <span style="color: #e18f8f;">注意:每张图片扣减3额度</span>
        </el-form-item>

        <el-form-item>
          <el-button @click="imgAgree">我同意</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </span>

    <span class="create-img-server-class">
      <el-dialog
          title="绘画攻略"
          :visible.sync="usageGuideState"
          width="50%"
      >
      <el-form>
        <el-form-item style="color: #c0c4cc;">
          【图片描述词】：图片描述词，可以英文，可以中文，但是一定得详细描述场景，如果你的描述过于简单的时候，
          尽量选择一种绘画风格，或艺术家，这样才会有优质的画图，而且英文和中文两种词汇描述不一样
          <br/>
          <span style="color: #FFFFFF">比如：</span>
          <p style="color: #FFFFFF">中文描述：一个小男孩夜晚在山上，浩瀚无暇的星空，他俯视着整个城市</p>
          <p style="color: #FFFFFF">英文描述：小男孩，在山上，俯视整个城市，星空，夜晚（需要翻译成英文）</p>
          <span style="color: #FFFFFF">从上面可以看出，中文是一句话概况，而英文是单个词汇的概况场景</span>
          <p style="color: #FFFFFF">描述词可形容具体【形状】和【场景】尽量不要出现【某个名词，某个人物，名人，电影，书籍】，画图尽量依赖形状和场景</p>
          <br/>
          【随机种子】：什么是随机种子？Ai画画的随机种子是一个数字序列，用来控制生成图像所使用的随机值。随机种子可以让生成出来的图像更加随机、复杂，同时也能让图像更加稳定，当相同的随机种子被使用时，就可以得到相同的结果，而不会有明显的变化，
          不填写，则后台会为你随机参数一串随机种子
          <br/>

        </el-form-item>

        <el-form-item>
          <el-button @click="usageGuideOk">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </span>

    <el-dialog
        title="我的账户"
        :visible.sync="dialogState"
        width="80%"
        >

      <el-tabs type="border-card">
        <el-tab-pane label="用户信息">
          <el-descriptions title="信息">
            <el-descriptions-item label="登录IP">{{userInfo.bindIP}}</el-descriptions-item>
            <el-descriptions-item label="登录账号">{{userInfo.username}}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{userInfo.regDate}}</el-descriptions-item>
            <el-descriptions-item label="备注">
              暂无备注
            </el-descriptions-item>
            <el-descriptions-item label="总额度">
              <span style="color: red;font-weight: 600;">{{userInfo.balance}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户类型">
              <el-tag type="info" v-if="userInfo.type === 0">普通用户</el-tag>
              <el-tag type="warning" v-else-if="userInfo.type === 1">内测用户</el-tag>
              <el-tag type="success" v-else>PLUS等级: {{userInfo.type-1}}级</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="剩余赠送次数">
              <el-tag size="info">{{userInfo.resettingCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="每次赠送额度">
              <el-tag size="info">{{userInfo.resettingBalance}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="每日限制额度">
              <el-tag >{{userInfo.limitationCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="今日已使用额度">
              <el-tag >{{userInfo.useCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="一共使用的额度">
              <el-tag >{{userInfo.allUseCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
              <el-tag >{{userInfo.name}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="我的邀请码">
              <el-tag >待生效</el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="说明">
            <el-descriptions-item label="规则">
              <el-tag size="info">所有规则和解释权已主办方为主</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="注意！">
              <el-tag size="info">额度每天都会累加针对于PLUS用户</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="赠送说明">
              <el-tag size="info">昨日没用完的额度则累加到今日,具体请看总额度</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="咨询">
              <el-tag >{{userInfo.remark}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="AI绘画">
              <el-tag >每张图片扣减3额度</el-tag>
            </el-descriptions-item>
          </el-descriptions>



        </el-tab-pane>
        <el-tab-pane :label="aiDrawState?'绘画使用记录':'聊天使用记录'">

          <el-row>
            <el-col :span="24">

              <el-card v-if="!aiDrawState">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                  <el-table-column
                      width="80"
                      prop="requestId"
                      label="编号" sortable>
                  </el-table-column>


                  <el-table-column
                      width="300"
                      prop="requestContent"
                      label="请求的话语" >
                  </el-table-column>

                  <el-table-column
                      width="180"
                      prop="requestTime"
                      label="请求时间">
                  </el-table-column>

                  <el-table-column
                      prop="requestMsg"
                      label="请求状态">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.requestMsg === '请求成功'" type="success">请求成功</el-tag>
                      <el-tag v-else type="danger">请求失败</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                      prop="groupCode"
                      label="消息分组码">
                  </el-table-column>


                  <el-table-column
                      prop="consumptionLimit"
                      label="消耗额度">
                    <template slot-scope="scope">
                      <span v-if="scope.row.requestMsg === '请求成功'" style="color: red;">-{{scope.row.consumptionLimit}}</span>
                      <span v-else style="color: #75a99c;">- 0</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                      prop="dialogueCount"
                      label="对话轮数">
                  </el-table-column>

                </el-table>

                <el-footer>
                  <!--分页-->
                  <el-row style="margin-top: 20px;">
                    <el-col :span="24">
                      <el-pagination
                          class="el-pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          layout="total, sizes, prev, pager, next, jumper"
                          :page-sizes="[5, 20, 50, 100,500]"
                          :current-page="current"
                          :page-size="size"
                          :total="total">
                      </el-pagination>
                    </el-col>
                  </el-row>
                </el-footer>
              </el-card>

              <el-card v-else>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                  <el-table-column
                      width="450"
                      prop="prompt"
                      label="图片描述" >
                  </el-table-column>


                  <el-table-column
                      prop="serverType"
                      label="服务器类型" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.serverType === 0">公共服务器</span>
                      <span v-if="scope.row.serverType === 1">个人服务器</span>
                      <span v-if="scope.row.serverType === 2">自建服务器</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                      prop="createTime"
                      label="创建时间" sortable>
                  </el-table-column>

                  <el-table-column
                      width="110"
                      prop="imgBase"
                      label="图片">
                    <template slot-scope="scope">
                      <img :src="scope.row.imgBase" style="width: 100px;height: 100px;"/>
                    </template>
                  </el-table-column>

                  <el-table-column width="80" align="center" label="扣除额度">
                    <template slot-scope="scope">
                      <span style="color: red;">-3</span>
                    </template>
                  </el-table-column>

                </el-table>

                <el-footer>
                  <!--分页-->
                  <el-row style="margin-top: 20px;">
                    <el-col :span="24">
                      <el-pagination
                          class="el-pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          layout="total, sizes, prev, pager, next, jumper"
                          :page-sizes="[5, 20, 50, 100,500]"
                          :current-page="current"
                          :page-size="size"
                          :total="total">
                      </el-pagination>
                    </el-col>
                  </el-row>
                </el-footer>
              </el-card>


            </el-col>
          </el-row>

        </el-tab-pane>

        <el-tab-pane label="开发者">
          <el-row>
            <el-col :span="24">

              <el-form ref="form" label-width="120px">
                <el-form-item label="开发者app_key:">
                  <el-input :value="userInfo.appKey">
                    <el-button slot="append" @click="updateAppKey">更换密钥</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label="查看文档:">
                  <span @click="selectDoc" style="color: #10a37f;cursor: pointer;font-size: 18px;">查看接口文档<i class="el-icon-s-order"></i></span>
                </el-form-item>
              </el-form>

            </el-col>
          </el-row>
        </el-tab-pane>


        <el-tab-pane label="账号分销">
          <el-row>
            <el-col :span="24">

              <el-form ref="form" label-width="120px">
                <el-form-item label="分销说明:">
                  <span style="color: #999999">将自己部分额度共享给一个新的账户(创建了一个新的账户)，额度由当前分销人设置，额度不能超过当前账号的额度</span>
                </el-form-item>
                <el-form-item label="登录账号:">
                  <el-input placeholder="可以不填写邮箱，如果不是邮箱格式后续则影响找回密码功能点" v-model="distributionInfo.username"/>
                </el-form-item>
                <el-form-item label="登录密码:">
                  <el-input v-model="distributionInfo.password" />
                </el-form-item>
                <el-form-item label="赠送额度:">
                  <el-input :min="0" v-model="distributionInfo.giveLimit" type="number"/>
                </el-form-item>
                <el-form-item >
                  <el-button @click="okDistribution">确认分销</el-button>
                </el-form-item>
              </el-form>

            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="头像选择">
            <el-row>
              <el-col :offset="8" :span="8">
                <div style="width: 100%;height: 120px;text-align: center;margin-top: 40px;">
                  <img :src="headImg" style="width: 120px;height: 120px;border-radius: 8px" alt=""/>
                </div>
                <div style="width: 100%;height: 50px;margin-top: 30px;text-align: center">
                  <el-button @click="updateHead">更换头像</el-button>
                </div>
              </el-col>
            </el-row>
        </el-tab-pane>

      </el-tabs>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogState = false">取 消</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="选择头像"
        :visible.sync="updateHeadState"
        width="70%"
    >

      <el-row>
        <el-col :span="24">
            <div class="head-img" @click="headImgIndex=number" :class="headImgIndex===number?'head-img-ac':''" v-for="number in 51" :key="number">
                <img :src="'https://plumgpt.com/chat/default/'+number+'.jpg'"
                     :style="{borderRadius:headImgIndex===number?'50%':'5px',borderColor:headImgIndex===number?'#10a37f':'#fff'}"
                     alt="" />
            </div>
        </el-col>
      </el-row>

      <el-row style="margin-top: 40px;">
        <el-col :span="24">
          <el-button @click="confirmUpdateHead">确认更换</el-button>
        </el-col>
      </el-row>

    </el-dialog>


    <el-dialog
        title="新增角色"
        :visible.sync="addRoleState"
        width="50%"
    >
      <el-row>
        <el-col :span="24">
            <el-form ref="form" :model="formRole" label-width="80px">
              <el-form-item label="角色名称">
                <el-input v-model="formRole.name"></el-input>
              </el-form-item>

              <el-form-item label="角色描述">
                <el-input type="textarea" :rows="5" v-model="formRole.desc"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="roleSubmit">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
        </el-col>
      </el-row>
    </el-dialog>

    <div class="main-bottom" v-if="handleScrollState && initChatState===1" @click="mainBottomClick">
      <svg t="1682318116165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3082" ><path d="M512 960C264.533333 960 64 759.466667 64 512S264.533333 64 512 64 960 264.533333 960 512 759.466667 960 512 960z m0-853.333333c-221.866667 0-405.333333 183.466667-405.333333 405.333333s183.466667 405.333333 405.333333 405.333333 405.333333-183.466667 405.333333-405.333333-183.466667-405.333333-405.333333-405.333333z" p-id="3083" fill="#999999"></path><path d="M490.666667 320h42.666666v384h-42.666666z" p-id="3084" fill="#999999"></path><path d="M512 725.333333c-4.266667 0-12.8 0-17.066667-4.266666l-192-192 29.866667-29.866667 174.933333 174.933333 174.933334-174.933333 29.866666 29.866667-192 192c4.266667 4.266667-4.266667 4.266667-8.533333 4.266666z" p-id="3085" fill="#999999"></path></svg>
    </div>

  </div>
</template>

<script>
import recordsList from "@/components/RecordsList";
import browser from "@/util/browser";
import createData from "@/util/createData";
import $config from '../../config/access'
import Recorder from '../../assets/js/recorder-core';
import '../../assets/js/mp3.js';
import '../../assets/js/mp3-engine.js';
import data from "@/views/chat/data";

export default {
  name: "index",
  data(){
    return data.data
  },
  created() {
    this.getUserInfo()
    this.getChattingRecords()
    this.getRoleList()
    this.isPlus()
    localStorage.removeItem("ip")
    localStorage.removeItem("e")
    localStorage.removeItem("su_")
    localStorage.removeItem("v_s_n")
    document.title = '新建会话'
    if (this.aiDrawState){
      this.$nextTick(()=>{
        document.getElementById('chatting-content-right').scrollTop
            = document.getElementById('chatting-content-right').scrollHeight
      })
    }
    if (localStorage.getItem("keepSate") == null){
        localStorage.setItem("keepSate",1)
    }else {
      this.keepSate = Number(localStorage.getItem("keepSate")) === 1;
    }
    if (localStorage.getItem("switchSocketState") == null) {
      localStorage.setItem("switchSocketState", 1);
    }
    this.switchSocketState = Number(localStorage.getItem("switchSocketState")) === 1

    if (localStorage.getItem('aiDrawState_local') == null) {
      localStorage.setItem('aiDrawState_local',1)
    }
    this.aiDrawState =  Number(localStorage.getItem('aiDrawState_local')) === 0

    if (localStorage.getItem('showRightState_local') == null) {
      localStorage.setItem('showRightState_local',1)
    }
    this.showRightState =  Number(localStorage.getItem('showRightState_local')) === 0

    if (localStorage.getItem('voiceState_local') == null) {
      localStorage.setItem('voiceState_local',1)
    }
    this.voiceState =  Number(localStorage.getItem('voiceState_local')) === 0

    if (localStorage.getItem('imgUsingStandards_local') == null) {
      localStorage.setItem('imgUsingStandards_local',1)
    }
    this.imgUsingStandards =  Number(localStorage.getItem('imgUsingStandards_local')) === 0

    if (this.voiceState){
      this.recOpen();
    }

    if (this.aiDrawState){
      this.getAiServerData(0)
    }
    this.aiDrawStyleData = createData.aiDrawStyleData
    this.languageSelectedList = createData.languageSelectedList
    this.modelList = createData.modelList
    this.artistStyleData = createData.artistStyleData
  },
  components:{
    recordsList
  },
  watch:{
    initChatState:{
      handler(newValue, oldValue) {
          this.roleState = newValue !== 1;
      }
    },
    switchSocketState:{
      handler(newValue, oldValue) {
        this.updateInputBackg = newValue?'#ffffff':'#40414f'
        this.updateInputFontColor = newValue?'#606266':'#DCDFE6'
        this.updateInputBackgroundColor();
      }
    },
    modelDefaultObj:{
      handler(newVale,oldValue){
        this.modelChange(newVale)
      }
    }
  },
  mounted: function () {
    this.updateInputBackgroundColor();
    document.addEventListener("click", (e) => {
      this.modelSelectState = false;
    });
    window.addEventListener("wheel", this.checkScroll);
  },
  beforeDestroy() {
    this.recClose()
  },
  methods:{
    roleSubmit(){
        if(!this.formRole.name){
          this.$message.error("角色名称必填项")
          return
        }
        if (!this.formRole.desc){
          this.$message.error("角色描述必填项")
          return;
        }
        this.$http.post("/request/open/role/save",this.formRole).then(res=>{
          if (res.data.code === 200){
              this.formRole.name = ''
              this.formRole.desc = ''
              this.addRoleState = false
              this.getRoleList()
          }
        })
    },
    addRole(){
       this.addRoleState = true
    },
    cancelFile(){
      this.currentFileObj = null;
    },
    async handleDrop(e){
      e.preventDefault();
      const file = e.dataTransfer.files[0];
      if (!file) {
        return;
      }
      const fileFormat = file.name.split('.').pop();
      if (!this.allowedFormats.includes(fileFormat)) {
        this.$message.error(`仅允许上传：${this.allowedFormats.join(', ')} 格式的文件`);
        return;
      }
      const fileSizeMB = file.size / 1024 / 1024;
      if (fileSizeMB > this.maxFileSize) {
        this.$message.error(`文件上传大小超过 ${this.maxFileSize}MB`);
        return;
      }
      // 发送上传请求
      const formData = new FormData();
      formData.append('file', file);
      try {
        this.currentFileCode = this.getCurrentCode()
        const response = await this.$http.post('/request/open/file/upload/'+this.currentFileCode, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        if (response.data.code === 200){
           this.currentFileObj = file
           this.$message.success("上传成功")
        }
      } catch (error) {
         this.$message.error("文件上传失败："+error);
      }
    },
    handleDragover(e){
      e.preventDefault();
    },
    handleDragenter(e){
      e.preventDefault();
    },
    // 模型选择回调事件
    modelChange(item){
      if (item.modelValue === 'file-gpt-3.5'){
          setTimeout(()=>{
            this.fileModelState = false
          },200)
      }else {
          this.fileModelState = true
      }
    },
    handlePaste(event){
      if (this.modelDefaultObj.modelValue === 'gpt-3.5-turbo-identify') {
        const item = (event.clipboardData || event.originalEvent.clipboardData).items[0];
        if (item.type.indexOf("image") !== -1) {
            const blob = item.getAsFile();
            const reader = new FileReader();
            reader.onload = (e) => {
              console.log(e.target.result)
            this.$http.post("/request/open/image/recognition",
                {
                  "base64":e.target.result,
                  "code":this.getCurrentCode()
                }).then(res=>{
                      if (res.data.code === 200){
                          let position = event.target.selectionStart;
                          let oldText = this.currentTextValue;
                          this.currentTextValue = this.currentTextValue.slice(0, position) +
                              res.data.data +
                              this.currentTextValue.slice(position)
                          let indexOf = this.currentTextValue.indexOf("[[https://plumgpt.com/chat");
                          let lastOf = this.currentTextValue.lastIndexOf("[[https://plumgpt.com/chat");
                          if (indexOf !== lastOf){
                            this.currentTextValue = oldText;
                            this.$message.error("当前文本域只能上传一张图片")
                          }
                      }
                  })
           };
           reader.readAsDataURL(blob);
        }
      }
    },
    mainBottomClick(){
      this.checkScrollState = false
      this.chattingBottom('chatting-content-right')
    },
    sidebarShow(){
      this.sidebarState = true
      setTimeout(()=>{
        this.sidebarNewState = true
      },300)
    },
    sidebarHide(){
      this.sidebarState = false
        this.sidebarNewState = false
    },
    confirmUpdateHead(){
      if(this.headImgIndex <= 0){
        this.$message.error("请选择头像")
        return;
      }
      this.$http.get("/request/open/update/head/sculpture/"+this.headImgIndex).then(res=>{
        if (res.data.code === 200){
           this.headImg = "https://plumgpt.com/chat/default/"+this.headImgIndex+".jpg";
          this.updateHeadState = false
           this.$message.success("更换成功！")
        }
      })
    },
    updateHead(){
      this.updateHeadState = true
    },
    checkScroll(event){
      if(!this.aiDrawState){
        try {
          if (event.deltaY > 0) {
            setTimeout(()=>{
              let dom = document.getElementById('chatting-content-right')
              if ((dom.scrollTop + 2000) > dom.scrollHeight){
                this.checkScrollState = false
              }
            },100)
          } else if (event.deltaY < 0) {
            this.checkScrollState = true
          } else {
            console.log("用户没有滚动鼠标滚轮");
          }
        }catch (e) {

        }
      }
    },
    toOpenCode(){
      window.location.href = "https://gitee.com/susantyp/chatgpt-template-java"
    },
    toDev(){
      this.$alert('             ' +
          '1，全网最强GPT，一比一还原官方界面，还原度百分之90%<br/>' +
          '2，三端运营，分别为pc端，手机端，总管理后台<br/>\n' +
          '3，部署简单，代码友好，有注释<br/>\n' +
          '4，需要源码加vx：typsusan<br/>\n' +
          '5，源码和部署问题作者一对一指导<br/>', '部署同款GPT',
          {
        dangerouslyUseHTMLString: true,
        showConfirmButton:false,
        showCancelButton:true,
        cancelButtonText:'确认'
      });
    },
    share(item) {
     this.$http.post("/request/open/user/share/chat", { code: item.groupCode }).then(res => {
       if(res.data.code === 200){
         navigator.clipboard.writeText($config.serverUrl.skipUrl + "share/" + res.data.data)
             .then(() => {
               this.$message.success('分享链接复制成功')
             })
             .catch(() => {
               this.$message.error('分享链接复制失败')
          })
       }
     })
    },
    openTool(){
      this.toolboxState = !this.toolboxState
      this.bottomShowPanl = !this.bottomShowPanl
    },
    temperatureBlur(){
      let regex = /^(?:0(?:\.[0-9])?|1(?:\.[0-9])?|2(?:\.0)?)$/;
      if (!regex.test(this.userSettingsInfo.temperature)){
        this.$message.error("错误的格式，请输入0到2之间的整数或小数（小数保留一位小数）")
        return
      }
      this.updateUserSettings(false);
    },
    dialogueCountBlur(e){
      if(this.submitState){
        this.$message.error("等待消息打印完成后再修改")
        return;
      }
        let regex = /^(?:[1-9]|10)$/;
       if (!regex.test(this.userSettingsInfo.dialogueCount)){
          this.$message.error("错误的格式，请输入1到10之间的整数")
          return
       }
       this.updateUserSettings(true);
    },
    updateUserSettings(state){
      this.$http.get("/request/open/user/update/info/settings/"+state+"/"+this.userSettingsInfo.dialogueCount+
          "/"+this.userSettingsInfo.temperature).then(res=>{
            if (res.data.code === 200){
              this.$message.success(res.data.msg);
            }
      })
    },
    settingsClick(){
      this.settingsState = !this.settingsState
      this.bottomShowPanl = !this.bottomShowPanl
    },
    okDistribution(){
        if(this.distributionInfo.username.trim().length < 5){
          this.$message.error("账号至少大于5个字符")
          return;
        }
        if (this.distributionInfo.password.trim().length < 6){
          this.$message.error("密码长度不小于6位！")
          return;
        }
        if (this.distributionInfo.giveLimit < 100){
          this.$message.error("赠送额度必须大于等于100")
          return;
        }
        this.$http.post("/request/open/user/distribution",this.distributionInfo).then((res)=>{
            if (res.data.code === 200){
              this.userInfo.balance = this.userInfo.balance - this.distributionInfo.giveLimit
               this.$message.success("分销成功");
               this.distributionInfo = {
                 username:'',
                 password:'',
                 giveLimit:0
               }
            }
        })
    },
    imgBiSelect(bi){
      if (bi === "512*512"){
          return "1:1"
      }else if (bi === "768*576"){
        return "4:3"
      }else if (bi === "576*768"){
        return "3:4"
      }else if (bi === "432*768"){
        return "9:16"
      }else if (bi === "768*432"){
        return "16:9"
      }else if (bi === "768*512"){
        return "3:2"
      }else {
        return "暂无尺寸"
      }
    },
    deleteAiServer(sid,index){
      this.$http.post("/request/open/ai/draw/delete/server",{sid:sid}).then(res=>{
        if(res.data.code === 200){
          this.aiServerData.splice(index,1)
        }
      })
    },
    deleteImgAi(pid,index){
      this.$http.post("/request/open/painting/delete/img",{pid:pid}).then(res=>{
        if(res.data.code === 200){
           this.paintersNumberList.splice(index,1)
        }
      })
    },
    usageGuideOk(){
      this.usageGuideState = false
    },
    usageGuide(){
      this.usageGuideState = true
    },
    viewPictureSelection(){
      this.$router.push("/picture")
    },
    hisWorks(wid,nickname){
      this.hisWorksUrl = '/works/index.html?wid='+wid
      this.hisWorksNickname = nickname
      this.hisWorksState = true
    },
    hisInformation(wid){
      this.$http.get("/request/open/his/information",{
        params:{
          wid:wid
        }
      }).then(res=>{
        if (res.data.code === 200){
           this.hisInformationObj = res.data.data
            this.hisInformationState = true
        }
      })
    },
    imgAgree(){
      this.imgUsingStandardsState = false
      this.imgUsingStandards = true
      localStorage.setItem('imgUsingStandards_local',0)
    },
    searchFriends(){
      if (!this.touser){
          this.$message.error("好友账号不能为空！")
        return
      }
      this.$http.get("/request/open/get/user/search/friends/"+this.touser).then(res=>{
          if (res.data.code === 200){
            if (res.data.data.click_s !== this.s_c_ck){
              let currentObj = this.friendsList.find((item) => item.click_s === res.data.data.click_s);
              if (!currentObj){
                this.friendsList.unshift(res.data.data)
              }
            }
          }
      })
    },
    deleteFriends(index){
      this.friendsList.splice(index,1)
    },
    createServerOnSubmit(){
      if (this.friendsList.length === 0) {
        this.$message.error("至少需要一个好友")
        return;
      }
      let obj = {
        serverName:this.currentServerName,
        friendsList:this.friendsList
      }
      this.$http.post("/request/open/create/server/on/submit",obj).then(res=>{
         if(res.data.code === 200){
           this.createImgServerState = false
            this.getAiServerData(1)
         }
      })
    },
    createImgServer(){
        this.createImgServerState = true
    },
    switchChangeImgShow(e){
        this.$http.post("/request/open/update/ai/img/show",{state:e}).then(res=>{})
    },
    continueImgCreate(createItem){
      this.resAiImgObj();
      this.prompt = createItem.prompt
      if(createItem.style){
        if (createItem.style.indexOf(" ") !== -1) {
            let fg = createItem.style.split(" ");
            let currentObj = this.aiDrawStyleData.find((item) => item.value === fg[0]);
            this.aiImgStyleActive = currentObj.index
            this.aiImgStyleObj = this.aiDrawStyleData[currentObj.index]
            let to_currentObj = this.artistStyleData.find((item) => item.value === fg[1]);
            this.artistStyleActive = to_currentObj.index
            this.artistStyleObj = this.artistStyleData[to_currentObj.index]
        }else {
          let currentObj = this.aiDrawStyleData.find((item) => item.value === createItem.style);
          if (!currentObj){
            let to_currentObj = this.artistStyleData.find((item) => item.value === createItem.style);
            if (to_currentObj){
              this.artistStyleActive = to_currentObj.index
              this.artistStyleObj = this.artistStyleData[to_currentObj.index]
            }
          }else {
            this.aiImgStyleActive = currentObj.index
            this.aiImgStyleObj = this.aiDrawStyleData[currentObj.index]
          }
        }
      }
      this.aiDrawWidthHeight = createItem.imgBi
      this.guidance_scale = createItem.guidanceScale
      this.steps = createItem.steps
      this.seed = createItem.seed
      this.sampler = createItem.sampler
      this.negative_prompts = createItem.negativePrompts
    },
    openImg(src){
      window.open(src, '_blank');
    },
    downloadImg(src) {
      let image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = new Date().getTime() + "" // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = src
      return Promise.resolve()
    },
    createImg(){

      if (!this.imgUsingStandards){
           this.imgUsingStandardsState = true
          return;
      }

       if (this.submitCreateImgState) {
         return;
       }
       this.submitCreateImgState = true
       if(!this.prompt){
         this.$message.error("图片描述不能为空")
         return;
       }
       if (this.aiServerDataObj == null){
           this.$message.error("服务器选择错误，请刷新页面重试")
           return;
       }
       let imgObj = {
         sid:this.aiServerDataObj.sid,
         serverType:this.aiServerDataObj.serverType,
         prompt:this.prompt,
         guidance_scale:this.guidance_scale,
         width:Number(this.aiDrawWidthHeight.split("*")[0]),
         height:Number(this.aiDrawWidthHeight.split("*")[1]),
         negative_prompts:this.negative_prompts,
         sampler:this.sampler,
         seed:this.seed,
         steps:this.steps,
         style:((this.aiImgStyleObj==null?"":this.aiImgStyleObj.value)+" "+(this.artistStyleObj==null?"":this.artistStyleObj.value)).trim(),
         aiDrawWidthHeight:this.aiDrawWidthHeight
       }
       this.paintersNumberList.push(
           {
             sid: this.aiServerDataObj.sid,
             serverType: this.aiServerDataObj.serverType,
             imgBase: require('@/assets/default/p_default.gif'),
             userNickname: this.nikeName,
             userHeadImg:this.headImg==='-1'?'':this.headImg,
             createTime: "等待图片创作中....",
             prompt: this.prompt,
             particulars: this.steps,
             guidanceScale: this.guidance_scale,
             imgBi: this.aiDrawWidthHeight,
             negativePrompts: this.negative_prompts,
             sampler: this.sampler,
             seed: this.seed,
             steps: this.steps,
             style: ((this.aiImgStyleObj==null?"":this.aiImgStyleObj.value)+" "+(this.artistStyleObj==null?"":this.artistStyleObj.value)).trim(),
             wid: this.s_c_ck,
             local:'1001'
           }
       )
      this.chattingBottom('chat-main-right-ai-mid-body-mid')
      let obj = this.filterObj(imgObj);
      this.$http.post("/request/open/n1/get/img",obj).then(res=>{
        if (res.data.code === 200) {
           this.resAiImgObj()
           let def = 2;
           this.getPainting(this.aiServerDataObj.sid,this.aiServerDataObj.serverType,def)
        }
        this.submitCreateImgState = false
      },error=>{
        this.submitCreateImgState = false
      })
    },
    filterObj(obj){
      for (let key in obj) {
        if (obj[key] == null || obj[key] === ''){
          Reflect.deleteProperty(obj,key)
        }
        if (obj[key] === 0){
           if (key === 'seed'){
             Reflect.deleteProperty(obj,key)
           }
        }
      }
      return obj
    },
    resAiImgObj(){
      this.prompt = ''
      this.aiImgStyleActive = -1
      this.aiImgStyleObj = null
      this.artistStyleActive = -1
      this.artistStyleObj = null
      this.aiDrawWidthHeight = '512*512'
      this.guidance_scale = 7.5
      this.steps = 50
      this.seed = 0
      this.sampler = 'ddim'
      this.negative_prompts = ''
    },
    artistStyleClick(item,index){
      if (index === this.artistStyleActive){
        this.artistStyleActive = -1
        this.artistStyleObj = null
      }else {
        this.artistStyleActive = index
        this.artistStyleObj = item
      }
    },
    aiImgStyleClick(item,index){
      if (index === this.aiImgStyleActive){
        this.aiImgStyleActive = -1
        this.aiImgStyleObj = null
      }else {
        this.aiImgStyleActive = index
        this.aiImgStyleObj = item
      }
    },
    aiDrawImgMouseEnter(){
      this.aiDrawImgHeight = true
    },
    aiDrawImgMouseLeave(){
      this.aiDrawImgHeight = false
    },
    clickServer(item){
      this.aiServerDataObj = item
      this.paintersNumberList = []
      this.paintersNumber = []
      this.currentPage = 1
      this.showMoreButton = true
      this.getPainting(item.sid,item.serverType,0)
    },
    getAiServerData(state){
        this.$http.get("/request/open/get/ai/server").then(res=>{
          if (res.data.code === 200){
             this.aiServerData = res.data.data.aiServerData
             this.s_c_ck = res.data.data.s_c_ck
             if (this.aiServerData.length !== 0){
               this.aiServerDataObj = this.aiServerData[0]
             }
             if (state === 0){
               this.getPainting(0,0,state);
             }
          }
        })
    },
    chatBoxScroll(e){
      this.$nextTick(()=>{
        let dom = document.getElementById("chat-main-right-ai-mid-body-mid")
        localStorage.setItem("dom_scroll_height",dom.scrollHeight)
      })
    },
    getPainting(sid, serverType, init) {
      if (init === 2) {
        this.paintersNumberList = [];
        this.paintersNumber = [];
        this.currentPage = 1;
        this.showMoreButton = true;
      }
      this.$http.get("/request/open/get/painting/record/list/" + sid + "/" + serverType + "/" + this.pageSize + "/" + this.currentPage)
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.chatRecord.length > 0) {
              let data = res.data.data.chatRecord;
              // Check if the item already exists in the array before adding it
              data.forEach(item => {
                if (!this.paintersNumberList.some(existingItem => existingItem.pid === item.pid)) {
                  this.paintersNumberList.unshift(item);
                }
              });
              this.paintersNumber = res.data.data.paintersNumberList.filter((item, index, self) => {
                return index === self.findIndex(t => t.wid === item.wid);
              });
              if (init === 1) {
                this.currentPage++;
                if (res.data.data.chatRecord.length > 0) {
                  this.$nextTick(() => {
                    let defaultNumber = 3300;
                    let index = this.currentPage === 1 ? 1 : this.currentPage - 1;
                    document.getElementById("chat-main-right-ai-mid-body-mid").scrollTop = defaultNumber + (index * 250);
                  });
                }
              }
            } else {
              this.showMoreButton = false;
            }
            if (init === 0 || init === 2) {
              this.chattingBottom('chat-main-right-ai-mid-body-mid');
            }
          }
        });
    },
    selectDoc(){
      this.$router.push("/doc")
    },
    updateAppKey(){
      this.$http.post("/request/open/update/app/key").then(res=>{
        if (res.data.code === 200){
          this.userInfo.appKey = res.data.data
        }
      })
    },
    textPlaceholder(index){
      if (this.modelDefaultObj.modelValue === 'gpt-3.5-turbo-identify'
          || this.modelDefaultObj.modelValue === 'file-gpt-3.5') {
          return 'Send message....'
      }else {
        if (index === 0 ){
          if (this.selectedRole != null){
            return this.selectedRole.roleName+' 再次输入 “/” 可清除角色';
          }else {
            return '提出你的问题...  “/” 换醒角色面板，跟不同角色畅聊人生'
          }
        }else if (index === 1){
          if (this.selectedRole != null){
            return '当前角色：'+this.selectedRole.roleName +' 可新建会话 输入 “/” 可重选角色';
          }else {
            return 'Send message....'
          }
        }
      }

    },
    roleHeight(length){
      let result = length  / 4
      if (result <= 1){
          return 1
      }else {
        return Math.floor(Number.isInteger(result)?result:result+1);
      }
    },
    currentTextInput(){
      if (this.modelDefaultObj.modelValue !== 'gpt-3.5-turbo-identify'
          || this.modelDefaultObj.modelValue !== 'file-gpt-3.5') {
        if (this.currentTextValue.trim().substring(0, 1) === '/'){
          this.rolePaleState = true
          this.restRole(1)
        }else {
          this.rolePaleState = false
        }
      }

    },
    findModel(){
      if (localStorage.getItem('modelType') == null){
        return '';
      }else {
        try {
          return '模型：'+this.modelList.find((item)=> item.modelValue === window.atob(localStorage.getItem('modelType'))).modelName;
        }catch (e) {
          return '';
        }
      }
    },
    mouseleaveOptions(){
      this.optionsShowTipsState = false
    },
    mouseenterOptions(item,index){
      this.modelIndex = index
      this.optionsShowTipsState = true
      this.mouseenterModelDefaultObj = item
    },
    optionsClick(item){
      this.modelDefaultObj = item
      this.modelSelectState = false
    },
    modelSelectClick(){
      this.modelSelectState = true
    },
    isPlus(){
      this.$http.get("/request/open/is/plus").then(res=>{
        if (res.data.code === 200){
           this.isPlusType = res.data.data
        }
      })
    },
    languageSelect(){
      this.languageState = true
    },
    recOpen(){
      this.rec = null;
      this.recBlob = null;
      const newRec = Recorder({
        type: 'mp3',
        sampleRate: 16000,
        bitRate: 16
      });
      newRec.open(() => {
        this.rec = newRec;
      }, (msg, isUserNotAllow) => {
      });

      window.waitDialogClick = () => {
      };
    },
    recClose() {
      if (this.rec) {
        this.rec.close();
      }
    },
    recMouseout(){
      if (this.recordingState){
        this.recStop();
      }
    },
    recStart() {
      if (this.submitState){
         this.$message.warning('等待消息返回')
         return;
      }
      this.submitState = true
      this.recordingState = true
      if (this.rec && Recorder.IsOpen()) {
        this.recBlob = null;
        this.rec.start();
      }
    },
    recStop() {
      this.recordingState = false
      if (!(this.rec && Recorder.IsOpen())) {
        return;
      }
      this.rec.stop((blob, duration) => {
        if (Math.floor(duration / 1000) > this.recorderLength){
            this.$message.error("时间不能超过"+this.recorderLength+"秒")
        }else {
          this.recBlob = blob;
          const reader = new FileReader();
          reader.onloadend = () => {
            let result = reader.result.replace("data:audio/mp3;base64,","")
            let obj = {
              voiceBase:result,
              voiceBaseLength:blob.size,
              viceType:this.languageObj.value
            }
            this.$http.post("/request/open/start/voice",obj).then(res=>{
              this.submitState = false
              if (res.data.code === 200){
                 if (res.data.data === '' || res.data.data == null){
                      this.$message.warning('未检测到内容')
                 }else {
                   this.currentTextValue = res.data.data
                   this.sendMessage('voice')
                 }
              }
            })
          };
         reader.readAsDataURL(blob);
        }
      }, (msg) => {
      });
    },
    voiceClick(){
      this.voiceState = !this.voiceState
      localStorage.setItem('voiceState_local',this.voiceState?0:1)
      if (this.voiceState){
        this.recOpen();
      }else {
        this.recClose();
      }
    },
    showRight(){
      this.showRightState = !this.showRightState
      localStorage.setItem('showRightState_local',this.showRightState?0:1)
      if (this.showRightState) {
        this.showRightStateDrawText = ''
      }else {
        this.showRightStateDrawText = '绘画人数'
      }
    },
    aiKeywordsChange(){
       if (this.aiKeywords.length > 500){
          this.aiKeywords = this.aiKeywords.substring(0,500)
       }
    },
    aiHeight(){
      return this.aiDrawState?'210px':'250px'
    },
    aiBackColor(){
      return this.aiDrawState?'rgba(1, 1, 13,0.6)':'#202123'
    },
    aiDrawButton(){
      console.log(this.aiDrawState)
      this.initChatState = this.aiDrawState?3:0
      localStorage.setItem('aiDrawState_local',this.aiDrawState?0:1)
      this.updateInputBackgroundColor();
      if (this.aiDrawState){
         window.location.reload()
      }
    },
    wallet(){
      window.open($config.serverUrl.skipUrl+'recharge','_blank')
    },
    dialogRoleText(){
      return this.selectedRole==null?"":this.selectedRole.roleValue
    },
    roleInfo(){
        this.roleDialogState = true
    },
    restRole(num){
      // new Chat
      if (num === 1){
        this.selectedRole = null
        this.currentRole = null
        this.updateInputBackgroundColor()
      }
    },
    updateInputBackgroundColor() {
      this.$nextTick(() => {
        const inputElement = this.$el.querySelector(".el-input__inner");
        if (inputElement) {
          inputElement.style.setProperty("--input-bg-color", this.updateInputBackg);
        }
      });
    },
    selectRole(selectedRid) {
      if (selectedRid != null){
        let selectedItem = null;
        this.selectedRole = null;
        this.currentRole = null;
        for (const group of this.roleList) {
          selectedItem = group.list.find((item) => item.rid === selectedRid);
          if (selectedItem) break;
        }
        this.selectedRole = selectedItem
        this.currentRole = selectedItem==null?null:selectedRid
      }else {
        this.selectedRole = null;
        this.currentRole = null;
      }
      this.currentTextValue = this.currentTextValue.substring(1)
    },
    getRoleList(){
      this.$http.get("/request/open/role/list",{}).then((res)=>{
        this.roleList = res.data.data
      })
    },
    handleScroll(event) {
      const { target } = event;
      const isBottom = Math.round(target.scrollTop + target.clientHeight + 15) >= target.scrollHeight;
      this.handleScrollState = isBottom?false:true;
    },
    clickItem(txt){
      this.currentTextValue = txt
    },
    chatStopNumber(){
      this.stopNum ++
    },
    stopPrint(){
      this.stopNum ++
      this.newPrintState = false
      this.submitState = false
      this.$nextTick(()=>{
        this.chatMsg(this.$refs.records.receivedCharsResult())
      })
    },
    imgIndexOf(content){
      return content.indexOf("$c/：") !== -1 ||
          content.indexOf("$C/：") !== -1 ||
          content.indexOf("$c/:") !== -1 ||
          content.indexOf("$C/:") !== -1 ||
          content.indexOf("$m/：") !== -1 ||
          content.indexOf("$M/：") !== -1 ||
          content.indexOf("$m/:") !== -1 ||
          content.indexOf("$M/:") !== -1
    },
    handleSizeChange(val) {
      this.size = val
      this.deductionRecordList()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.deductionRecordList()
    },
    account(){
      this.dialogState = true
      this.bottomShowPanl = !this.bottomShowPanl
      this.deductionRecordList()
    },
    deductionRecordList(){
      this.$http.get('/request/open/deduction/record/',{
        params:{
          current:this.current,
          size:this.size,
          bol:this.aiDrawState
        }
      }).then(res =>{
        this.userInfo = res.data.data.userInfo
        this.tableData = res.data.data.page.records
        this.size = res.data.data.page.size
        this.current = res.data.data.page.current
        this.total = res.data.data.page.total
      })
    },
    help(){
      this.bottomShowPanl = !this.bottomShowPanl
      window.open($config.serverUrl.skipUrl+'help','_blank')
    },
    textDown(e){
      if (this.requestContentList.length === 0){
        return
      }
      this.requestContentLength ++
      if (this.requestContentLength > this.requestContentList.length){
          this.requestContentLength = 0
      }
      this.currentTextValue = this.requestContentList[this.requestContentLength]
    },
    textUp(e){
      if (this.requestContentList.length === 0){
          return
      }
      if (this.requestContentLength === -1){
        this.requestContentLength = this.requestContentList.length
      }
      this.requestContentLength --
      this.currentTextValue = this.requestContentList[this.requestContentLength]
    },
    switchSocket(){
      if (localStorage.getItem("switchSocketState") == null) {
        localStorage.setItem("switchSocketState",0);
      }else {
        if (Number(localStorage.getItem("switchSocketState")) === 0) {
            localStorage.setItem("switchSocketState",1)
        }else {
            localStorage.setItem("switchSocketState",0)
        }
      }
      this.switchSocketState = Number(localStorage.getItem("switchSocketState")) === 1
    },
    currentGroupCode(){
      return Number(new Date().getTime())
    },
    deleteAll(){
      this.$http.post("/request/open/delete/all").then((res)=>{
        this.chattingList = []
        this.initChatState = 0
        this.itemCode = 0
        this.recordsList = []
        document.title = '新建会话'
        this.getChattingRecords();
      })
    },
    deleteGroup(item){
      if (this.chattingList.length === 1){
         this.initChatState = 0
         this.itemCode = 0
         document.title = '新建会话'
         this.deleteChat(item)
      }else {
        if (this.recordsList.length === 0){
          this.itemCode = 0
          this.deleteChat(item)
        }else {
          if (item.requestRecordVoList[0].requestId === this.recordsList[0].requestId){
            this.initChatState = 0
            this.itemCode = 0
            this.recordsList = []
          }
          this.deleteChat(item)
        }
      }
      localStorage.removeItem("printState"+item.groupCode)
    },
    deleteChat(item){
      this.$http.post("/request/open/delete/group",{code:item.groupCode}).then((res)=>{
        if (this.chattingList.length === 1){
          this.recordsList = []
        }
        this.getChattingRecords();
      })
    },
    newChat(code,num){
      if (this.chattingList[0].requestRecordVoList[0].requestContent === ""){
        return;
      }
      if (this.chattingList.length !== 0){
        this.chattingList.unshift({
          requestRecordVoList:[
            {
              requestContent:"",
              respondContent:""
            }
          ],
          groupCode: code
        })
      }
      this.itemCode = code
      this.initChatState = 0
      this.recordsList = []
      this.restRole(num)
      this.currentFileCode = 0
      this.currentFileObj = null
      this.modelDefaultObj =     {
        modelName:'默认模型',
        modelValue:'gpt-3.5-turbo',
        des:'默认模型更关注你的内容中指明具体的角色和问题，这个比较常见同时也是大家使用最多的模型',
        speed:4,
        content:3,
        reasoning:4
      }
    },
    messageClick(item){
      console.log(item)
      if(this.submitState){
        this.$message.error("等待消息打印完成后再切换")
        return;
      }
      this.recordsList = []
      if (item.requestRecordVoList[0].requestContent !== ""){
        this.recordsList = item.requestRecordVoList
        this.initChatState = 1
      }else {
        this.initChatState = 0
      }
      this.itemCode = item.groupCode
      this.numberKey ++
      this.chattingBottom('chatting-content-right')
      this.selectRole(item.requestRecordVoList[0].rid)
      if(item.requestRecordVoList[0].modelType === 'file-gpt-3.5'){
         this.currentFileCode = item.groupCode
      }
      if (item.requestRecordVoList[0].modelType != null){
          localStorage.setItem('modelType',window.btoa(item.requestRecordVoList[0].modelType))
          this.modelDefaultObj = this.modelList.find(model => model.modelValue === item.requestRecordVoList[0].modelType);
      }else {
          localStorage.removeItem('modelType')
      }
    },
    getChattingRecords(){
      this.$http.get("/request/open/chatting/records",{}).then(res=>{
        this.chattingList = res.data.data.chattingList
        this.requestContentList = res.data.data.requestList
        this.requestContentLength = res.data.data.requestList.length
        this.modelKey ++
      })
    },
    getUserInfo(){
      this.$http.get("/request/open/get/user/info",{}).then(res=>{
        this.nikeName = res.data.data.nickname
        this.aiImgTipsShow = res.data.data.isImgShow !== 0
        this.headImg = res.data.data.headImg
        this.userSettingsInfo.dialogueCount = res.data.data.dialogueCount
        this.userSettingsInfo.temperature = res.data.data.temperature
        this.currentUsername = res.data.data.username
      })
    },
    next(){
      this.nextIndex ++
      if (this.nextIndex === 3){
        this.nextIndex = 0
        this.keepSate = false
        localStorage.setItem("keepSate",0)
      }
    },
    back(){
      this.nextIndex --
    },
    logout(){
      this.bottomShowPanl = !this.bottomShowPanl
      localStorage.removeItem("token");
      localStorage.setItem('aiDrawState_local',1);
      window.location.href = "/"
    },
    enterSend(e){
      e.preventDefault();
      this.sendMessage('text')
    },
    getCurrentCode(){
      let code = 0;
      if (this.chattingList.length === 0){
        code = this.currentGroupCode();
        this.itemCode = code
      }else {
        if(this.itemCode !== 0){
          code = this.itemCode
        }else {
          code = this.chattingList[0].groupCode
          this.itemCode = code
        }
      }
      return code
    },
    childSendMessage(value){
     this.currentTextValue = value
     this.sendMessage('text')
    },
    sendMessage(msgType){
      if (this.currentTextValue.substring(0,1) === '/'){
        this.currentTextValue = this.currentTextValue.substring(1)
        this.rolePaleState = false
      }
      if (this.currentTextValue.trim() === "" || this.currentTextValue.trim() ==null){
          this.$message.error("请输入内容");
          return;
      }
      if (this.submitState){
          return;
      }
      if (this.initChatState === 0 && this.chattingList.length !== 0){
          this.newChat(this.currentGroupCode())
      }

      localStorage.setItem("msgType",msgType)

      this.initChatState = 1
      let value = this.currentTextValue
      let currentImgUrl = "";
      if (this.modelDefaultObj.modelValue === 'gpt-3.5-turbo-identify') {
          const linkRegex = /\[\[([^[\]]+)\]\]/;
          const match = linkRegex.exec(value);
          if (match && match.length > 1) {
              currentImgUrl = match[1];
              if (currentImgUrl){
                value = value.replace("[["+currentImgUrl+"]]","" +
                    "<img alt='' style='width: 100%;height: 300px;' src='"+currentImgUrl+"' />")
              }
          }
      }
      document.title = value
      this.$http.get("/request/open/check/balance").then(res=>{
        if (res.data.code === 200){

          if (!res.data.data){
            this.recordsList.push({
              requestContent:value,
              respondContent:"<div style='" +
                  "width: 100%;height: auto;padding: 15px;border: 1px solid #ef4444;background-color: #f6e5e6;color: #565869;" +
                  "font-size: 15px;border-radius: 10px;" +
                  "'>你的余额已经用完！如果想继续可加QQ群聊：237343691，联系群主可免费获取额度</div> "
            })
            this.chattingBottom('chatting-content-right')
            return;
          }else {
            this.recordsList.push({
              requestContent:value,
              respondContent:""
            })
          }

          this.submitState = true
          let code = this.getCurrentCode()
          if (code == null){
            this.$message.error("发送错误，请刷新页面重试！");
            return;
          }
          let data = {
            content:this.currentTextValue,
            groupCode:code,
          }
          this.chattingBottom('chatting-content-right')
          this.currentTextValue = ''
          localStorage.setItem("tagCode",code);
          localStorage.setItem("currentMsg",encodeURIComponent(value))
          this.numberKey ++
          this.$nextTick(()=>{
            this.$refs.records.currentReceivedChars()
          })
          localStorage.removeItem('r_s_n')
          let roleSystem = ""
          if (this.selectedRole != null){
            roleSystem = this.selectedRole.rid
            localStorage.setItem('r_s_n',encodeURIComponent(this.selectedRole.rid))
          }
          localStorage.setItem('modelType',window.btoa(this.modelDefaultObj.modelValue))
          this.$http.post("/request/open/send/webSocket/msg",
              {
                content:value,
                code:this.modelDefaultObj.modelValue === 'file-gpt-3.5'?this.currentFileCode:Number(localStorage.getItem("tagCode")),
                browserId:browser.getLoginBrowser(),
                system:roleSystem,
                modelType:localStorage.getItem('modelType'),
                imgUrl:currentImgUrl
              }).then(res2=>{
            this.newPrintState = true
            setTimeout(()=>{
              this.$nextTick(()=>{
                if (this.$refs.records.currentIsMessage()){
                  this.$notify.error({
                    title: 'error',
                    message: '会话连接失败，请刷新浏览器，或清除缓存重试'
                  });
                }
              })
            },10000)
          }).catch(()=>{
            this.newPrintState = false
            this.submitState = false
          })
        }
      })
    },
    chatErrorMsg(){
      this.newPrintState = false
      this.submitState = false
      this.getChattingRecords()
    },
    chatMsg(responseMsg){
      if (responseMsg === ''){
        return
      }
      this.$http.post("/request/open/msg/save",
          {
            requestMsg:localStorage.getItem("currentMsg"),
            responseMsg:encodeURIComponent(responseMsg),
            code:this.modelDefaultObj.modelValue === 'file-gpt-3.5'?this.currentFileCode:Number(localStorage.getItem("tagCode")),
            system:localStorage.getItem('r_s_n')==null?"":decodeURIComponent(localStorage.getItem('r_s_n')),
            msgType:localStorage.getItem('msgType'),
            msgResources:'pc',
            modelType:localStorage.getItem('modelType')
          }
      ).then(res=>{
        this.newPrintState = false
        this.submitState = false
        this.getChattingRecords()
        this.chattingBottom('chatting-content-right')
      }).catch(()=>{
        this.newPrintState = false
        this.submitState = false
      })
    },

    chattingBottom(el){
      setTimeout(()=>{
        document.getElementById(el).scrollTop
            = document.getElementById(el).scrollHeight
      },100)
    }
  }
}
</script>

<style scoped>
@import "./index.css";
</style>

<style>
.textarea-selected .el-input__inner {
  background-color: var(--input-bg-color, #ffffff)!important;
}
</style>
